mPDF:为整页使用背景图像
Posted
技术标签:
【中文标题】mPDF:为整页使用背景图像【英文标题】:mPDF: use background image for full page 【发布时间】:2018-05-10 15:04:45 【问题描述】:我需要使用 mPDF 生成发票,它们都有页眉、页脚和必须覆盖整个页面的相同背景图像。
我在网上看到过其他解决方案,但没有一个对我有用。
这是几次尝试,都导致失败(图片不显示、50*错误或使用图片时图片覆盖了部分内容):
1- 使用外部 CSS 文件并将其作为 CSS 内容注入
$pdf = new mPDF('es', 'A4', 0, '', 5, 5, 0, 0, 0, 0, 'P');
$pdf->useSubstitutions=false;
$pdf->setAutoTopMargin = 'stretch';
$pdf->SetDisplayMode('fullpage');
$css = file_get_contents('./styles.css');
$cabecera = file_get_contents('./header.html');
$cuerpo = file_get_contents('./body.html');
$pie = file_get_contents('./footer.html');
$pdf->SetHTMLHeader($cabecera);
$pdf->SetHTMLFooter($pie);
$pdf->WriteHTML($css, 1);
$pdf->WriteHTML($cuerpo, 2);
$pdf->Output();
还有styles.css文件:
body
background-image: url('background_300dpi.png') ;
这会引发超时错误。 如果我使用低分辨率图像背景,它可以工作,但会破坏我的布局。
2- 尝试使用 SetDefaultBodyCSS 设置背景图片
$pdf = new mPDF('es', 'A4', 0, '', 5, 5, 0, 0, 0, 0, 'P');
$pdf->useSubstitutions=false;
$pdf->setAutoTopMargin = 'stretch';
$pdf->SetDisplayMode('fullpage');
$cabecera = file_get_contents('./cabecera.html');
$cuerpo = file_get_contents('./cuerpo.html');
$pie = file_get_contents('./pie.html');
$pdf->SetHTMLHeader($cabecera);
$pdf->SetHTMLFooter($pie);
$pdf->SetDefaultBodyCSS('background', "url('background_300dpi.png')");
$pdf->SetDefaultBodyCSS('background-image-resize', 6);
$pdf->WriteHTML($cuerpo, 2);
$pdf->Output();
超时错误。 如果我使用低分辨率图像,它确实有效。但这不是一个好的打印解决方案,因为信头中有小写字母,包含在背景图像中。
3 - 尝试使用图像(背景图像分为顶部信笺和底部图像)而不是唯一的背景图像,并将边距限制设置为 false
$pdf = new mPDF('es', 'A4', 0, '', 5, 5, 0, 0, 0, 0, 'P');
$pdf->useSubstitutions=false;
$pdf->setAutoTopMargin = 'stretch';
$pdf->SetDisplayMode('fullpage');
$cabecera = file_get_contents('./cabecera.html');
$cuerpo = file_get_contents('./cuerpo.html');
$pie = file_get_contents('./pie.html');
$pdf->SetHTMLHeader($cabecera);
$pdf->SetHTMLFooter($pie);
$pdf->WriteHTML($cuerpo, 2);
$pdf->Image('miramar/background_top.png', 0, 0, 210, 28.5, 'png', '', true, false);
$pdf->Image('miramar/background_bottom.png', 0, 259, 210, 38, 'png', '', true, false, false, false);
$pdf->Output();
在这种情况下没有超时,但是页脚图像使页脚中包含的某些内容消失了。
有人知道如何实现它吗?
另一个问题:mPDF 是否支持矢量图像作为背景?我可能会将背景图像用作 SVG 文件。
【问题讨论】:
【参考方案1】:使用@page
CSS 选择器而不是body
来设置背景。然后添加属性background-image-resize: 6;
,保证图片覆盖每一页的全宽和全高。
在styles.css中:
@page
background: url('/full/path/to/image/background_300dpi.png') no-repeat 0 0;
background-image-resize: 6;
【讨论】:
出现超时错误。似乎需要很多时间来处理它。处理图像时,mPDF 似乎太慢了。 我还检查了如果我使用低分辨率背景图像(这是不可取的,因为打印起来会很糟糕)mPDF 在超时期限内处理它,但它会破坏我的布局无论如何:( 这对我有用,background-image-resize
记录在哪里?
@RaulSauco mpdf.github.io/css-stylesheets/supported-css.html【参考方案2】:
我明白了!正如我后来猜测的那样,我可以将背景图像用作矢量图像(SVG),我可以这样做。
这是代码:
$pdf = new mPDF('es', 'A4', 0, '', 5, 5, 0, 0, 0, 0, 'P');
$pdf->useSubstitutions=false;
$pdf->setAutoTopMargin = 'stretch';
$pdf->SetDisplayMode('fullpage');
$cabecera = file_get_contents('./cabecera.html');
$cuerpo = file_get_contents('./cuerpo.html');
$pie = file_get_contents('./pie.html');
$pdf->SetHTMLHeader($cabecera);
$pdf->SetHTMLFooter($pie);
$pdf->SetDefaultBodyCSS('background', "url('./background_image.svg')");
$pdf->SetDefaultBodyCSS('background-image-resize', 6);
$pdf->WriteHTML($cuerpo, 2);
$pdf->Output();
使用 SVG,它就像一个魅力,而且速度很快!
【讨论】:
【参考方案3】:您在示例文件中查看: example54_new_mPDF_v5-1_features_gradients_and_images.php
<?php
$path = (getenv('MPDF_ROOT')) ? getenv('MPDF_ROOT') : __DIR__;
require_once $path . '/vendor/autoload.php';
$mpdf = new \Mpdf\Mpdf();
//==============================================================
$html = '
<style>
table
background: url(\'assets/bayeux1.jpg\') repeat scroll left top;
.table1 tr.thisrow1
background-image-resolution: 300dpi;
.table1 tr.thisrow1 td
height: 28mm;
.table1 tr.thisrow2
background-image: none;
background: -moz-linear-gradient(left, #c7Fdde 20%, #FF0000 );
background: -webkit-gradient(linear, left bottom, left top, color-stop(0.29, rgb(90,83,12)), color-stop(0.65, rgb(117,117,39)), color-stop(0.83, rgb(153,153,67)));
</style>
<table class="table1">
<tbody>
<tr><td>Row 1</td><td>This is data</td><td>This is data</td></tr>
<tr class="thisrow1">
<td>This row has</td>
<td>a background-image</td>
<td>of the bayeux tapestry</td>
</tr>
<tr><td><p>Row 3</p></td><td><p>This is long data</p></td><td>This is data</td></tr>
<tr class="thisrow2"><td>This row has</td><td>a gradient set</td><td>which spans all 3 cells</td></tr>
<tr><td>Row 5</td><td>Also data</td><td>Also data</td></tr>
</tbody>
</table>
';
$mpdf->WriteHTML($html);
$mpdf->Output(); exit;
【讨论】:
以上是关于mPDF:为整页使用背景图像的主要内容,如果未能解决你的问题,请参考以下文章