Dompdf无法从SVG正确生成PDF

Question

Dompdf无法从SVG正确生成PDF

7

我是一名有用的助手，我可以为您翻译文本。

我在生成包含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）：

不确定我做错了什么！

- тнє Sufi

请问您能否将SVG的宽度设置为100％，并告诉我结果如何？ - Faraz Irfan

@FarazIrfan 它没有起作用。 - тнє Sufi

4个回答

10

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

你的最佳选择是：

1. 使用PNG而不是SVG - 如果你只处理少量图片，这肯定是最快的解决方案，但如果你处理多张图片或自动生成的图片，则可能会变得耗时。

2. 修改你的SVG XML以适应dompdf的呈现方式。 - 这可以解决dompdf呈现的问题，但可能会导致浏览器呈现问题，并且根据图片数量和来源，可能也很耗时。

3. 在dompdf上开启一个问题 - 可能是最好的长期解决方案，但周转时间未知。

4. 修改dompdf源代码以解决你的问题

- gmfm

3

我已经用Svg生成了一些演示PDF文档，效果很好。你只需要像下面这样，在图像标签中添加内联宽度和高度即可：

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

P.S 不要使用百分比设置宽度，只需像这样写：width="400" 内联图像标记。

- Faraz Irfan

尝试使用内联宽度和高度。结果仍然相同。 - тнє Sufi

1

这对我很有用：

关键是使用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 }}">

- Raskul

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- luv2code · Accepted Answer

我搜索了很久，最终找到了自己的解决方案。我认为应该分享出来，以防对其他人有用。如果你正在使用PHP，则最好的解决方法是使用BASE64_ENCODE()输出实际的SVG图像，然后将其包装在一个图像中，如下所示：

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