我正在使用 Dompdf 从 PHP 应用程序中的 HTML 模板生成 PDF 发票。 HTML/CSS 模板包含用于布局目的的 display: flex,但是当使用 Dompdf 渲染为 PDF 时,display: flex 的行为不符合预期。相反,元素布局不正确或看起来未对齐。
我已经验证 HTML 和 CSS 在 Web 浏览器中可以正常工作,并且该问题似乎特定于 Dompdf 的渲染引擎。这是我的代码的简化版本:
use Dompdf\Dompdf;
use Dompdf\Options;
// Initialize Dompdf
$options = new Options();
$options->set('isHtml5ParserEnabled', true);
$options->set('isRemoteEnabled', true);
$options->set('isPhpEnabled', true);
$dompdf = new Dompdf($options);
$html = '<html>
<head>
<style>
.container {
display: flex;
}
.item {
width: 100px;
height: 50px;
background-color: #ccc;
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>';
$dompdf->loadHtml($html);
$dompdf->setPaper('A4', 'portrait');
$dompdf->render();
$dompdf->stream('output.pdf', array('Attachment' => 0));
以下是网站上的布局: 网站布局
生成的 PDF 中的外观如下: 生成的 PDF 布局
我尝试过的: 将 CSS 和 HTML 简化为基本元素。 检查 Dompdf 文档和 CSS 兼容性。 确保所有必需的 PHP 扩展(php-mongodb、php-zip、php-gd、php-dom)均已安装且是最新的。
这是一个常见问题,因为 Dompdf 的 CSS 支持有限,特别是对于像 Flexbox 这样的现代布局功能。也许您可以尝试以下任一替代方案:
display: inline-block
并进行适当的字体大小管理,以实现一致的水平对齐。display: table/table-cell
),它在 Dompdf 中有很好的支持。如果您想坚持使用 Dompdf,请考虑选择选项 1 或 2;如果您需要完整的 CSS 支持并且可以使用外部服务,请考虑选择选项 3。