在CodeIgniter中使用dompdf库时HTML与CSS样式失效问题求助

看起来你遇到的核心问题是dompdf没有正确解析你的HTML结构和样式，导致输出纯文本。我来帮你一步步排查和解决：

1. 确保HTML结构完整 #

dompdf需要标准的HTML文档结构（包含<!DOCTYPE html>、<html>、<head>、<body>标签）才能正确解析样式。你的模板只是孤立的<div>，缺少这些必要的根元素。修改你的pdftemplate视图：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title><?= $title;?></title>
    <!-- 自定义CSS确保样式生效，dompdf对Bootstrap兼容有限，建议用精简样式 -->
    <style>
        .block { padding: 15px; }
        .row { display: flex; margin-bottom: 20px; gap: 10px; }
        .col-md-6 { width: 50%; }
        .table { width: 100%; border-collapse: collapse; margin-top: 15px; }
        .table-bordered th, .table-bordered td { 
            border: 1px solid #333; 
            padding: 8px; 
            text-align: left;
        }
        .app-widget-informer { line-height: 1.5; }
        .title { font-weight: bold; font-size: 1.1em; margin-bottom: 5px; }
        .tinyintval { margin-bottom: 4px; }
    </style>
</head>
<body>
<div class="block">
 <!-- 你的原有模板内容 -->
 <div class="row">
 <div class="col-md-6">
 <p>company Logo</p>
 </div>
 <div class="col-md-6" style="color:red;">
 <p>Purchase Order</p>
 </div>
 </div>
 <div class="app-heading app-heading-small">
 <div class="title">
 <h5><?= $title;?></h5>
 </div>
 </div>
 <?php foreach($invoice_view as $inv):?>
 <div class="row">
 <div class="col-md-6">
 <div class="app-widget-informer">
 <div class="title">To:<?= $inv->client_company_name;?></div>
 <div class="tinyintval"><?= $inv->address;?></div>
 <div class="tinyintval"></div>
 <div class="tinyintval">Phone:<?= $inv->phone;?></div>
 <div class="tinyintval">Email:<?= $inv->email;?></div>
 </div>
 </div>
 <div class="col-md-6">
 <div class="app-widget-informer">
 <div class="tinyintval">Po#:<?= $inv->invoice_id;?></div>
 <div class="tinyintval">Po Date:<?= $inv->issue_date;?></div>
 </div>
 </div>
 </div>
 <table class="table table-bordered" >
 <thead>
 <th>slno </th>
 <th>Description</th>
 <th>Unit Price</th>
 <th>Quantity</th>
 <th>Cost</th>
 <th>Tax %</th>
 </thead>
 <tbody>
 <?php foreach($inv->tableinvoice as $tabin):?>
 <tr >
 <td><?= $tabin->id; ?></td>
 <td><?= $tabin->description; ?></td>
 <td><?= $tabin->unitprice; ?></td>
 <td><?= $tabin->quantity; ?></td>
 <td><?= $tabin->cost; ?></td>
 <td><?= $tabin->tax; ?></td>
 </tr>
 <?php endforeach;?>
 </tbody>
 </table>
 <?php endforeach;?>
 </div>
</body>
</html>

注：顺手修正了你表格列与值的对应错误（原代码里Unit Price和Quantity的数值写反了），避免生成的PDF数据错位。

2. 优化控制器的dompdf初始化逻辑 #

你的控制器代码可以调整得更可靠，避免输出缓冲干扰：

$this->load->library('Pdf');
$id = $this->uri->segment(3);
$data['title'] = 'Invoice';
$data['invoice_view'] = $this->Invoice_Model->get_purchaseorder_by_id($id);

// 清空并开启输出缓冲，确保只获取视图内容
ob_clean();
ob_start();
$this->load->view('components/pdftemplate', $data);
$html = ob_get_clean();

$dompdf = new DOMPDF();
// 开启远程资源加载（如果需要加载外部图片/CSS）
$dompdf->set_option('isRemoteEnabled', true);
// 设置纸张规格（可选，默认A4纵向）
$dompdf->setPaper('A4', 'portrait');

$dompdf->load_html($html);
$dompdf->render();
// 强制浏览器下载PDF
$dompdf->stream("invoice.pdf", array("Attachment" => true));
exit; // 终止脚本，避免后续多余输出

3. 关于Bootstrap样式的兼容性提示 #

dompdf对Bootstrap的响应式类（如col-md-6）支持有限，复杂的框架样式容易渲染异常。如果一定要用Bootstrap，建议使用适配dompdf的精简版本，或者直接用内联样式/自定义CSS替代响应式类，这样渲染效果更稳定。

4. 排查额外输出干扰 #

如果你的视图或控制器中存在多余的空格、调试echo语句，这些都会混入HTML内容破坏结构。可以在获取$html前用ob_clean()清空所有之前的输出，确保拿到的是纯净的模板HTML。

按照以上步骤修改后，dompdf应该能正确解析HTML结构和CSS样式，生成带格式的PDF文件了。

内容的提问来源于stack exchange，提问作者Abdul Rafi