Dompdf 无法从 SVG 正确生成 pdf

问题描述 投票：0回答：5

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

生成的 pdf 如下所示：enter image description here

但是，当我使用PNG图像时，它工作正常。 生成的 pdf 如下所示（使用 png）：enter image description here

不知道我做错了什么！

php pdf svg dompdf
5个回答
26
投票

我一直在寻找，直到我终于想出了自己的解决方案。我想我应该分享，以防它对其他人有用。如果您使用 PHP 内联 SVG 图像的最佳解决方案（对我来说）是在实际 svg 上使用 BASE64_ENCODE() 输出它，然后使用 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 的宽度和高度，以确保其大小正确。再次希望这有帮助！

10
投票

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

您最好的选择是：

  1. 使用 PNG 代替 SVG
    • 如果您处理少量图像，这绝对是最快的解决方案，但如果您处理许多图像或自动生成的图像，这可能会变得耗时。
  2. 更改 SVG XML 以适应 dompdf 的渲染方式。
    • 这可以解决您的 dompdf 渲染问题，但可能会导致浏览器渲染问题，并且根据图像和源的数量也可能非常耗时。
  3. 使用 dompdf 打开问题
    • 可能是最好的长期解决方案，但周转时间未知。
  4. 更改 dompdf 源代码来解决您的问题
3
投票

我用 Svg 生成了一些演示 PDF，它工作得很好，你只需要像这样向图像标签添加内联宽度和高度

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

P.S 不要以 % 为单位设置宽度，只需这样写 width="400" 内联 img 标签

2
投票

它对我有用：

魔法就是

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 }}">
0
投票

像这样使用它：

<img src="data:image/png;base64,<?php echo base64_encode(file_get_contents(base_path('public/productimage/'.$data->prod_img))); ?>" width="120">

这对我有用。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.