首页 > 解决方案 > 使用不同方向时,mPDF 在 TOC 之后创建空白页

问题描述

我正在尝试通过mPDF工作表具有以下方向的位置创建 PDF 文件:

___________
| Page 1   |
|          |
| Portrait |
|          |
___________
___________
| Page 2   |
|  TOC     |
| Portrait |
|          |
___________
__________________
| Page 3          |
| Landscape       |
|                 |
__________________
___________
| Page 4   |
|          |
| Portrait |
|          |
___________

但是,更改第 3 页的方向会使 mPDF 在第 2 页 (TOC) 和第 3 页之间创建一个空白页。

PDF 以 HTML 格式创建,然后处理为 mPDF。代码如下:

HTML:

<html>
<head>
    <style>
        @page page-landscape { size: landscape; }
        @page page-portrait { size: portrait; }

        div.landscape {
            page: page-landscape;
        }
        div.portrait {
            page: page-portrait;
        }

    </style>
</head>
<body>
    <div>
        <div>First page - displayed Portrait. The second page should be the TOC (portrait) and the 3rd should be on landscape</div>
    </div>

    <tocpagebreak />

    <div class="landscape">
       <bookmark content="TOC entry" level="0"/>
        <tocentry content="TOC entry" level="0"/>
        <p>TOC entry - Shouldn\'t have a empty page before</p>
    </div>

    <div class="portrait">
        another page
    </div>
</body>
</html>

PHP

$mpdf = new \Mpdf\Mpdf();
$mpdf->WriteHTML($html);
$mpdf->Output();

我已经尝试了很多方法来完成这项工作,但没有成功。我将列出其中的一些:

我使用的是 mPDF v6.0,现在我正在更新到 mPDF v8.0.1。所有版本(6、7 和 8)都会出现此问题。在版本 6 上,我通过添加$mpdf->DeletePages(2);after使用了 hack,$mpdf->WriteHTML($html);但这有两个主要问题:

  1. 此方法未记录在案,似乎有问题
  2. 有了这个,页码与正确的页面不匹配,所以我不能在页脚上添加页码

有没有办法在没有空白页的情况下做到这一点?还是可行的解决方法?

标签: phpmpdf

解决方案


我想出了如何使这项工作。关键是将class="landscape"(或您在 CSS 上设置的名称)添加到容器中,<tocpagebreak />而不是您要在横向上显示的实际页面。

所以 HTML 应该是:

<html>
<head>
    <style>
         @page page-landscape { size: landscape; }
         @page page-portrait { size: portrait; }

        div.landscape { page: page-landscape; }
        div.portrait { page: page-portrait; }
    </style>
</head>

<body>
    <div class="portrait">
        <div>First page - displayed Portrait. The second page should be the TOC (portrait) and the 3rd should be on landscape</div>
    </div>

    <div class="landscape">
        <tocpagebreak />
   </div>

    <div>
     <bookmark content="TOC entry consolidacao" level="0"/>
        <tocentry content="TOC entry consolidacao" level="0"/>
        <p>TOC entry - Shouldn't have a empty page before</p>
    </div>

    <div class="portrait">
        <bookmark content="2nd page" level="0"/>
        <tocentry content="2nd page" level="0"/>
        <p>2nd page</p>
    </div>
</body>
</html>

注意<div class="landscape">包装<tocpagebreak />. 这实际上并没有改变 TOC 的方向,而是改变了下一页 - 我想它与 mPDF 的内部有关。然后,当您想将方向更改为纵向时,只需在class="portrait"您希望应用它的页面上添加 (如“第 2 页”所示)。

其他需要注意的是:

  1. 如果您有一个带有填充的所有内容的包装器,它似乎会在顶部或 TOC 之前创建一个空白页面(无论出于何种原因)。我有一个<div class="page-content">作为子元素<body>的类有一个padding: 15px;使mPDF创建一个新页面的类。
  2. 如果您正在使用样式表,我建议您在测试时删除它们。此示例按原样工作,但如果您在有外部样式表时尝试它,它可能无法按预期工作。当这种情况发生时,这意味着某种风格迫使 mPDF 创建一个空白页面(这就是我发现 1. 的方式)。此外,我正在使用 Bootstraprowcol-xx类并将它们全部删除。
  3. 仅用于<pagebreak />创建新页面但保持方向。或者使用style="page-break-before: always;". 这很重要,因为在您摆弄时可能会发现自己<pagebreak />在尝试更改方向时创建了一个新页面,从而为您提供了一个新的空白页面。
  4. 最后,如果你使用$mpdf->SetFooter()or $mpdf->SetHTMLFooter()(或对应的Header方法),一旦你使用了@page选择器,页眉/页脚就不会显示在页面上。您需要设置一个命名的页眉/页脚并通过@page选择器上的 CSS 指定它。有关更多信息,请参阅文档中的示例 5 。

推荐阅读