Mpdf - 全页大小的图像，但仅适用于单页
Posted
技术标签:
【中文标题】Mpdf - 全页大小的图像，但仅适用于单页【英文标题】：MPdf - Full page size image, but only for single page 【发布时间】：2016-10-04 19:55:14 【问题描述】：我知道有类似的问题，但没有一个能解决我的问题。我想用 mPDF 做的如下：
Page 1: Text for item 1
Page 2: Full width and height image to cover the page with an image of item 1
Page 3: Text for item 2
Page 4: Full width and height image to cover the page with an image of item 2
...
下面的代码以拉伸图片的方式，我想实现：
body
background-image:url("image1.jpg");
background-image-resize: 5;
background-position: top center;
但这会导致在每个页面上设置图像（我知道，它是 body 元素）。所以我尝试了以下方法：
<div style='
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:url("image1.jpg");
background-image-resize: 5;
background-position: top center;
'></div>
但这不起作用。所以我尝试了相同的代码，只是使用颜色，而不是图像：
<div style='
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #F00;
'>
</div>
<div style="page-break-before: always;"></div>
这是有效的。整个页面都是红色的。那么如何用一张图片来达到同样的效果呢？
有什么想法吗？
【问题讨论】：
【参考方案1】：经过大量尝试后，我发现，最简单的方法就是将 html 代码拆分为单独的部分，并通过单独的 WriteHtml 调用插入它们。例如：
// Create object
$mpdf = new \mPDF('utf-8');
// Create first text page
$mpdf->WriteHTML('<p>Text for item 1</p>');
// Add a new page with the image
$mpdf->AddPage();
$mpdf->WriteHTML("<html><body style='background-image:url(\"image1.jpg\"); background-image-resize: 5; background-position: top center;'></body></html>");
// Create second page
$mpdf->AddPage();
$mpdf->WriteHTML('<p>Text for item 1</p>');
...
【讨论】：
这是一个非常好的解决方案。如果您通过 HTML 构建 PDF，请记住，您不能在很多元素上应用height，尤其是 tables，您可以在 vertical-align:middle 上应用。这里的技巧是创建一个带有背景图像的<div style="height:100%">，将其定位在center 和no-repeat，然后瞧。【参考方案2】：
尺寸限制： 编写 HTML 时，图像大小会自动限制为当前页边距和页面位置。添加到 Image() 函数末尾的额外参数允许您覆盖它：
<?php
// the last "false" allows a full page picture
$mpdf->Image('files/images/frontcover.jpg', 0, 0, 210, 297, 'jpg', '', true, false);
这对于例如文档的封面。
这可以使用 HTML 和 CSS 来实现，如下所示：
<div style="position: absolute; left:0; right: 0; top: 0; bottom: 0;">
<img src="/files/images/frontcover.jpg"
style="width: 210mm; height: 297mm; margin: 0;" />
</div>
请参阅https://mpdf.github.io/what-else-can-i-do/images.html#size-constraint 了解更多信息。
【讨论】：
【参考方案3】：我尝试了Sunchock 的回答，但并没有按原样为我工作，但经过一些修改，我终于创建了一个完整的图像封面（第一个 PDF 页面）。
这里是代码。基本上我删除了img 标签并将尺寸样式移动到了div。最后在 html 的样式中（可能是 div 中的内联样式）添加图像作为背景。您可以在 mpdf doc here 中找到有关 background-image-resize 标签的更多信息
<style>
#cover
background-image: url("http://php72.com/resources/image.png");
background-image-resize: 6;
</style>
<div id="cover" style="position: absolute; left:0; right: 0; top: 0; bottom: 0; width: 210mm; height: 297mm;">
</div>
【讨论】：
以上是关于Mpdf - 全页大小的图像，但仅适用于单页的主要内容，如果未能解决你的问题，请参考以下文章