mPDF：使用背景图像显示整页

Question

我需要使用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文件。

Answer 1

我知道了！正如我后来猜测的那样，我可以将背景图像用作矢量图像 (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，它就像一种魅力，而且速度很快！

Answer 2

使用@pageCSS选择器代替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;
}