Dompdf 无法从 SVG 正确生成 pdf答案

【问题标题】：Dompdf not generating pdf properly from SVGDompdf 无法从 SVG 正确生成 pdf
【发布时间】：2018-07-28 10:01:58
【问题描述】：

我在生成带有 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）：

不知道我做错了什么！

【问题讨论】：

您能否将 100% 宽度添加到 SVG 并告诉我您得到了什么？
@FarazIrfan 没用。

标签： php pdf svg dompdf

【解决方案1】：

我一直在寻找，直到最终找到自己的解决方案。我想我应该分享一下，以防它对其他人有用。如果您使用 PHP 内联 SVG 图像的最佳解决方案（对我而言）是在实际 svg 上使用 BASE64_ENCODE() 输出它，然后使用源代码如下：

$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 的宽度和高度，以确保其大小正确。再次希望这会有所帮助！

【讨论】：

非常感谢！
在 laravel dompdf 中为我工作? 谢谢
对我来说，我必须保存 svg 文件并将其加载到 img 标签中才能在 Laravel 中工作。

【解决方案2】：

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

您最好的选择是：

使用 PNG 而不是 SVG
- 如果您要处理少量图像，这绝对是最快的解决方案，但如果您要处理大量图像或自动生成的图像，这可能会很耗时。
更改 SVG XML 以适应 dompdf 的呈现方式。
- 这可以解决您的 dompdf 渲染问题，但可能会导致浏览器渲染出现问题，并且根据图像和源的数量也可能很耗时。
用dompdf打开一个问题
- 可能是最好的长期解决方案，但周转时间未知。
更改 dompdf 源代码以解决您的问题

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

尝试使用内联宽度和高度。结果还是一样。

【解决方案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 }}">

【讨论】：