MPdf-全页尺寸图片，但仅适用于单页

本文介绍了MPdf-全页尺寸图片，但仅适用于单页的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我知道也有类似的问题，但是没有一个可以解决我的问题.我要使用mPDF进行以下操作:

I know there are similar questions, but non of them solve my problem. What i want to do with mPDF is the following:

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
...

以下代码以我想要实现的方式拉伸图像:

The following code stretches an image in the way, I want to achieve:

    body {
        background-image:url("image1.jpg");
        background-image-resize: 5;
        background-position: top center;
    }

但这会导致在每个页面上设置图像(我知道，它是body元素).所以我尝试了以下方法:

But this results to set the image on EVERY page (i know, its the body element). So i tried the following:

<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>

但这不起作用.所以我尝试了相同的代码，只是用了颜色，而不是图像:

But that is not working. So i tried the same code, just with an color, instead an image:

    <div style='
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #F00;
        '>
    </div>
    <div style="page-break-before: always;"></div>

这正在起作用.整个页面是红色的.那么如何在图像上达到相同的效果呢?

And this is working. The whole page is red. So how to achive the same with an image?

有什么想法吗?

推荐答案

经过大量的试用，我发现执行此操作的简便方法是将HTML代码拆分为单独的部分，并使用单独的WriteHtml调用.例如:

After a lot of tryouts, I found out, that the easist way to do this, is just to split up the HTML code into separate parts and insert them with separate WriteHtml calls. For example:

// 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>');

...

这篇关于MPdf-全页尺寸图片，但仅适用于单页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！