Dompdf 无法从 SVG 正确生成 pdf

Question

我在生成带有 SVG 内容的 pdf 保持设计时遇到问题。 SVG 在 html 内链接，并使用 html 生成 pdf。但无法正常工作。

这是代码：

$dompdf = new DOMPDF();

//HTML Content
$html = <<<EOD
<html>
    <head>
        <style type="text/css">
            html {
                margin: 1%;
                padding: 0;
            }
            .header,
            .footer {
                width: 100%;
                text-align: center;
                position: fixed;
                font-size: 26px;
            }
            .header {
                top: 0px;
            }
            .footer {
                bottom: 18px;
            }
            .center {
                margin: 0 auto;
            }
            .divTable{
                display: table;
                width: 100px;
                text-align: center;
                margin: 0 auto;
            }
            .divTableRow {
                display: table-row;
            }
            .divTableHeading {
                margin: 0 auto;
            }
            .divTableCell, .divTableHead {
                display: table-cell;
                padding: 0 33px;
            }
            .bottom .divTableCell {
                padding-top: 30px;
            }
            .divTableHeading {
                display: table-header-group;
                font-weight: bold;
            }
            .divTableFoot {
                display: table-footer-group;
                font-weight: bold;
            }
            .divTableBody {
                display: table-row-group;
            }
            div.img-border img {
                border: 2px solid #eb0089;
            }
        </style>
    </head>
    <body>
        <div class="center">
            <div class="divTable top">
                <div class="divTableBody">
                    <div class="divTableRow">
                        <div class="divTableCell" style="padding-left:0px;"><div class="img-border"><img src="$small_image"></div></div>
                        <div class="divTableCell"><div class="img-border"><img src="$small_image"></div></div>
                        <div class="divTableCell" style="padding-right:0px;"><div class="img-border"><img src="$small_image"></div></div>
                    </div>
                </div>
            </div>
            <div class="divTable bottom">
                <div class="divTableBody">
                    <div class="divTableRow">
                        <div class="divTableCell" style="padding-left:0px;"><div class="img-border"><img src="$large_image"></div></div>
                        <div class="divTableCell" style="padding-right:0px;"><div class="img-border"><img src="$large_image"></div></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            $customer_title - $customer_order_number
        </div>
    </body>
</html>
EOD;

//PDF Options
$dompdf->set_option( 'dpi' , '300' );
$dompdf->load_html($html);
$dompdf->setPaper('A4', 'portrait');
$dompdf->set_option( 'isRemoteEnabled', true );
$dompdf->render();

$output = $dompdf->output();
file_put_contents('path-to-pdf/new.pdf);

这是 html 视图（包括 svg）：view here

这是生成的 pdf 的样子：

但是，当我使用 PNG 图像时，它工作正常。这是生成的 pdf 的样子（使用 png）：

不确定我做错了什么！

Answer 1

我已经使用 Svg 生成了一些演示 PDF，它运行良好，您只需像这样向图像标签添加内联宽度和高度

<img width="400" src="yourpath/au.svg" />

P.S 不要在 % 中设置宽度就像这样 width="400" inline img tag

Answer 2

这不是你的 css 或 html 的问题。基本上这归结为 dompdf 以不同于浏览器的方式呈现您的 svg。 dompdf 将 svg xml 中的每个 group/item 单独渲染到显示的图像中，而浏览器在渲染之前将每个 group/item 定义为整个图像的一部分。

您最好的选择是：

使用 PNG 而不是 SVG
- 如果您要处理少量图像，这绝对是最快的解决方案，但如果您要处理许多图像或 auto-generated 图像，这可能会变得非常耗时。
改变您的 SVG XML 以适应 dompdf 的呈现方式。
- 这可以解决您的 dompdf 渲染问题，但可能会导致浏览器渲染问题，并且根据图像和源的数量也可能会耗费时间。
打开 dompdf 的问题
- 可能是最好的长期解决方案，但周转时间未知。
修改 dompdf 源代码来解决您的问题

Answer 3

我一直在搜索，直到我终于想出了自己的解决方案。我想我应该分享以防它对其他人有用。如果您使用 PHP 内联 SVG 图像的最佳解决方案（对我而言）是使用 BASE64_ENCODE()[=17 输出它=] 在实际的 svg 上，然后使用 src 将其包装在图像中，如下所示：

$svg = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 36 36" class="circular-chart"> <path class="circle-bg" stroke-width="1" fill="none" stroke="#ddd" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> </svg>'; $html = '<img src="data:image/svg+xml;base64,'.base64_encode($svg).'" width="100" height="100" />';

您可能会发现的唯一问题是实际图像的尺寸奇怪。您将不得不在 PDF 输出上对其进行处理，以确保它按需要显示。我需要删除实际 SVG 的宽度和高度以确保它的大小正确。再次希望这对您有所帮助！

Answer 4

对我有用：

魔术是base64_encode

控制器：

$qrCode = base64_encode(QrCode::format('png')->size(150)->generate('hello qrcode'));

$pdf->loadView('myfiles.pdf', compact('qrCode'));

查看：

<img src="data:image/png;base64, {{ $qrCode }}">

Dompdf 无法从 SVG 正确生成 pdf

Dompdf not generating pdf properly from SVG

php

pdf

svg

dompdf