使用mPDF时内联样式未识别的问题修复咨询

我之前也碰到过mPDF解析内联样式时的坑，结合你的代码情况，给你几个针对性的修复方案：

1. 修正变量名错误（最容易忽略的点） #

你的代码里定义的HTML变量是$htmls，但最后调用WriteHTML时传的是$html，这会导致mPDF根本没拿到你写了样式的HTML内容！先把这个拼写错误改过来：

$mpdf->WriteHTML($htmls); // 把$html改成$htmls

2. 关闭simpleTables配置 #

你开启了$mpdf->simpleTables = true;，这个参数是mPDF为了兼容老式简单表格设计的，开启后会忽略很多复杂的CSS样式（包括内联的表格样式、单元格padding等）。把它改成false，让mPDF用完整的表格解析模式：

$mpdf->simpleTables = false;

3. 优化HTML结构（可选，但能提升样式解析率） #

mPDF对标准HTML结构的支持更好，建议给你的HTML加上<head>标签，哪怕里面不放额外CSS，也能让解析更稳定。另外，部分CSS属性比如border-spacing在mPDF里用内联可能不如在<style>块里定义靠谱，你可以把通用样式放在HTML内部的<style>里，依然不用单独的CSS文件：

$htmls = '<html>
<head>
<style>
    body { font-size: 100px; }
    table { width:100%; border-spacing: 0; margin-top: 10px; background-color: #FF5733; font-size:100px; }
    td { padding: 5px 8px; }
</style>
</head>
<body>
    <table>
        <tr>
            <td style="font-weight: bold;">TEST</td>
            <td> Test1 </td>
            <td> Test2 </td>
        </tr>
    </table>
</body></html>';

修改后的完整代码示例 #

$htmls = '<html><body style="font-size:100px;"> 
<table style="width:100%;border-spacing: 0px; margin-top: 10px;background-color: #FF5733;font-size:100px;" > 
<tr> 
<td style="padding: 5px 8px; font-weight: bold;">TEST</td> 
<td style="padding: 5px 8px;"> Test1 </td> 
<td style="padding: 5px 8px;"> Test2 </td> 
</tr> 
</table></body></html>'; 

require './mpdf60/mpdf.php'; 
$mpdf = new mPDF('utf-8', 'A4', 1); 
$mpdf->SetDisplayMode('fullpage'); 
$mpdf->autoLangToFont = true; 
$mpdf->autoScriptToLang = true; 
$mpdf->useSubstitutions = false; 
$mpdf->simpleTables = false; // 关键修改：关闭simpleTables
$mpdf->packTableData = true; 
$mpdf->showImageErrors = true; 
$mpdf->list_indent_first_level = 0; 
$mpdf->WriteHTML($htmls); // 修正变量名
$fname = date('Y-m-d-h-i-s') . ".pdf"; 
$mpdf->Output(__DIR__ . "/pdf/" . $fname); 
$filePath = __DIR__ . "/pdf/" . $fname; 

按照上面的步骤修改后，你的内联样式应该就能被mPDF正确识别了。

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