php - 使用不同方向时,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();
我已经尝试了很多方法来完成这项工作,但没有成功。我将列出其中的一些:
toc-selector="page-portrait"
在<tocpagebreak>
标签上使用toc-orientation="P"
在<tocpagebreak>
标签上使用- 在
<pagebreak orientation="L" />
后面加一个<tocpagebreak>
class="landscape"
在div
TOC 之后使用,使用选择@page
器,如本例所示- 将变量设置
autoPageBreak
为false
mPDF 的构造函数 - 将页面包裹起来
div
并弄乱<pagebreak>
我使用的是 mPDF v6.0,现在我正在更新到 mPDF v8.0.1。所有版本(6、7 和 8)都会出现此问题。在版本 6 上,我通过添加$mpdf->DeletePages(2);
after使用了 hack,$mpdf->WriteHTML($html);
但这有两个主要问题:
- 此方法未记录在案,似乎有问题
- 有了这个,页码与正确的页面不匹配,所以我不能在页脚上添加页码
有没有办法在没有空白页的情况下做到这一点?还是可行的解决方法?
解决方案
我想出了如何使这项工作。关键是将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 页”所示)。
其他需要注意的是:
- 如果您有一个带有填充的所有内容的包装器,它似乎会在顶部或 TOC 之前创建一个空白页面(无论出于何种原因)。我有一个
<div class="page-content">
作为子元素<body>
的类有一个padding: 15px;
使mPDF创建一个新页面的类。 - 如果您正在使用样式表,我建议您在测试时删除它们。此示例按原样工作,但如果您在有外部样式表时尝试它,它可能无法按预期工作。当这种情况发生时,这意味着某种风格迫使 mPDF 创建一个空白页面(这就是我发现 1. 的方式)。此外,我正在使用 Bootstrap
row
和col-xx
类并将它们全部删除。 - 仅用于
<pagebreak />
创建新页面但保持方向。或者使用style="page-break-before: always;"
. 这很重要,因为在您摆弄时可能会发现自己<pagebreak />
在尝试更改方向时创建了一个新页面,从而为您提供了一个新的空白页面。 - 最后,如果你使用
$mpdf->SetFooter()
or$mpdf->SetHTMLFooter()
(或对应的Header方法),一旦你使用了@page
选择器,页眉/页脚就不会显示在页面上。您需要设置一个命名的页眉/页脚并通过@page
选择器上的 CSS 指定它。有关更多信息,请参阅文档中的示例 5 。
推荐阅读
- nginx - nginx 和 uwsgi 配置问题
- css - 为什么我的顶部标题位于导航菜单的顶部?
- c# - 当文件确实存在时,C# System.IO.FileNotFoundException
- angular - 从离子后退按钮导航后未触发 Ionic 4 ionViewDidEnter()
- app-store-connect - 删除路由应用程序覆盖文件时无法保存更改
- google-chrome-extension - 尽快将 CSS 注入页面
- python - 在 txt 文件中逐行导入的哈希不正确
- parquet - 如何以编程方式或使用编辑器编辑 Parquet 文件头?
- php - 如何编写函数更新的rest api方法?
- android - Android Studio USB Debugging 没有错误,但是当 Generated APK 时,无法正确执行