Dompdf无法从SVG正确生成pdf [英] Dompdf not generating pdf properly from SVG
问题描述
我无法生成包含SVG内容的pdf保留设计. SVG在html内链接，并使用html生成pdf.但不能正常工作.
I am having trouble generating pdf keeping design with SVG content. SVG is linked inside html, and using html to generate pdf. But not working properly.
这是代码:
$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):在此处查看
Here is the html view (including svg): view here
这是生成的pdf的样子:
This is how the generated pdf looks like:
但是，当我使用PNG图像时，效果很好. 这就是生成的pdf的外观(使用png):
However, when I use PNG image, it works fine. This is how the generated pdf looks like (using png):
不确定我在做什么错！
推荐答案
这与您的CSS或HTML无关.基本上，这归因于dompdf与浏览器的呈现方式不同. dompdf正在将svg xml中的每个组/项目分别渲染到显示的图像中，而浏览器正在将每个组/项目定义为整个图像的一部分，然后再进行渲染.
This is not a matter of your css or html. Basically this comes down to dompdf rendering your your svg differently then the browser. dompdf is rendering each group/item within the svg xml individually into the displayed image, whereas the browser is defining each group/item as part as the whole image before rendering.
您在这里的最佳选择是:
Your best options here are:
- 使用PNG而不是SVG
- 如果要处理少量图像，这绝对是最快的解决方案，但是如果要处理许多图像或自动生成的图像，这可能会很耗时.
- using PNG's instead of SVG's
- this would definitely be the quickest solution if you're dealing with a small number of images, but if you're dealing with many images or auto-generated images this could become time consuming.
- 这可以解决dompdf渲染问题，但可能导致浏览器渲染问题，并且根据图像数量和来源可能也很耗时.
- 可能是最好的长期解决方案，但周转时间未知.
这篇关于Dompdf无法从SVG正确生成pdf的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
