Dompdf 无法从 SVG 正确生成 pdf
тнє*_*ufi 7 php pdf svg dompdf
我在生成带有 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的样子： 
但是，当我使用 PNG 图像时，它工作正常。这是生成的 pdf 的样子（使用 png）：
不知道我做错了什么！
luv*_*ode 13
我一直在寻找，直到我终于想出了自己的解决方案。我想我应该分享一下，以防对其他人有用。如果您使用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 的宽度和高度以确保其大小正确。再次希望这有帮助！
小智 8
这与您的 css 或 html 无关。基本上这归结为 dompdf 渲染您的 svg 与浏览器不同。dompdf 将 svg xml 中的每个组/项目单独渲染到显示的图像中，而浏览器在渲染之前将每个组/项目定义为整个图像的一部分。
您最好的选择是：
- 使用 PNG 而不是 SVG
- 如果您正在处理少量图像，这绝对是最快的解决方案，但如果您正在处理许多图像或自动生成的图像，这可能会变得非常耗时。
- 更改您的 SVG XML 以适合 dompdf 呈现的方式。
- 这可以解决您的 dompdf 渲染问题，但可能导致浏览器渲染问题，并且根据图像和源的数量也可能很耗时。
- 打开dompdf 的问题
- 可能是最好的长期解决方案，但周转时间未知。
- 更改 dompdf 源代码以解决您的问题