Dompdf 未渲染显示:在生成的 PDF 中正确弯曲

问题描述 投票:0回答:1

我正在使用 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)均已安装且是最新的。

php html css pdf-generation dompdf
1个回答
0
投票

这是一个常见问题,因为 Dompdf 的 CSS 支持有限,特别是对于像 Flexbox 这样的现代布局功能。也许您可以尝试以下任一替代方案:

  1. 使用
    display: inline-block
    并进行适当的字体大小管理,以实现一致的水平对齐。
  2. 使用基于表格的布局(
    display: table/table-cell
    ),它在 Dompdf 中有很好的支持。
  3. 考虑使用第三方 HTML 到 PDF API,例如 PageSnap (https://pagesnap.co),它使用 Puppeteer/Chrome 进行渲染,它将支持包括 Flexbox 在内的所有现代 CSS 功能。

如果您想坚持使用 Dompdf,请考虑选择选项 1 或 2;如果您需要完整的 CSS 支持并且可以使用外部服务,请考虑选择选项 3。

© www.soinside.com 2019 - 2024. All rights reserved.