使用wkhtmltopdf把html字符串转成pdf时强制分页遇到困难

[已解决问题] 解决于 2023-08-30 21:30

我的代码大体上是这种结构：

内容1

内容2

内容1和内容2分别有很多小项（div、table都有，各有内容），我的期望是内容2能够新开一页开始

经过测试，如果内容1包含的小项内容都不多，那么内容2确实会新开一页

但是如果内容1包含的某个小项目有内容超出一整页而被迫截断的，那么内容2不会在内容1完了之后新开页，只会接着内容1继续排布，没搞懂什么原理

求教应该怎么设置呢

wkhtmltopdf pdf html 分页

hangjy | 初学一级 | 园豆：4
提问于：2023-07-11 08:49

< >

最佳答案

在使用 wkhtmltopdf 将 HTML 字符串转换为 PDF 时，可以使用 CSS 的 page-break-after 属性来控制分页。但是有时候可能会遇到一些问题，特别是当某个小项目的内容超出一页时，可能会导致分页的行为不符合预期。

这个问题可能是由于 wkhtmltopdf 在计算分页时的一些算法导致的。为了解决这个问题，你可以尝试以下几种方法：

使用 page-break-inside: avoid 属性：在内容1的小项目的 CSS 样式中，可以添加 page-break-inside: avoid 属性，以避免小项目被分割到两页。这样可以确保内容1的小项目完全显示在同一页上，而不会被截断到下一页。
```
<style>
.content1-item {
  page-break-inside: avoid;
}
</style>
<div class="content1-item">内容1的小项目1</div>
<div class="content1-item">内容1的小项目2</div>

```
使用 page-break-before 属性：在内容2的开头添加一个具有 page-break-before: always 属性的元素，以确保内容2从新的一页开始。
```
<style>
.content2 {
  page-break-before: always;
}
</style>
<div class="content2">内容2</div>

```

使用 page-break-after 属性：在内容1的末尾添加一个具有 page-break-after: always 属性的元素，以确保内容1结束后立即分页。

<style>
.content1-end {
  page-break-after: always;
}
</style>
<div class="content1">内容1</div>
<!-- 内容1的小项目 -->
<div class="content1-end"></div>

你可以根据具体的布局和需求选择适合的方法，或者尝试结合使用这些方法来达到你的预期效果。同时，也建议尝试使用最新版本的 wkhtmltopdf，以确保你使用的是最新的修复和改进。

奖励园豆：5

lanedm | 老鸟四级 |园豆：2396 | 2023-07-11 16:47

谢谢，我测试后发现在我需要强制分页的地方加上<p> </p><p> </p>后再加含page-break-after: always的元素才有效果，不加p标签甚至只加一个p标签都没用
不清楚原理是什么，之前到处搜索的时候看到过有人提到page-break-after: always对p有用对div没用，但是那是7、8年前的帖子了，我就尝试了一下，没想到有效果，但是不知道为什么

hangjy | 园豆：4 (初学一级) | 2023-07-11 21:34

@hangjy: 可能是因为 <p> 标签有自带的默认样式（如上下间距），而 <div> 标签没有，所以 <p> 标签设置一个固定高度的空白内容也能够强制分页。不过具体原因还需要进一步的调试和研究。
另外， <p> 标签通常被用于段落，即使是在没有正文的情况下，添加一两个空白的 <p> 标签也是符合代码规范的，并不会影响文档的结构和语义。

小九九呀 | 园豆：383 (菜鸟二级) | 2023-07-12 13:29

其他回答(1)

在使用wkhtmltopdf将HTML字符串转换为PDF时，强制分页可能会面临一些挑战。这是因为wkhtmltopdf在处理分页时，可能会受到HTML和CSS的复杂性以及特定元素的渲染行为的影响。

尽管您已经尝试使用<div style="page-break-after: always !important"></div>来强制分页，但wkhtmltopdf可能无法按预期工作，特别是当内容1的某个小项超出一页时。这是因为wkhtmltopdf可能会优先将整个小项放在同一页上，而不是在内容1之后新开一页。

以下是一些建议和技巧，帮助您更好地控制分页：

使用CSS的page-break-before和page-break-after属性：尝试将page-break-before: always和page-break-after: always应用于内容2的容器元素，而不是使用空的<div>元素。这样可以在内容1之后和内容2之前强制进行分页。
html
Copy code
<div class="content1">

</div>

<div class="content2" style="page-break-before: always; page-break-after: always;">

</div>
调整内容布局：尝试对内容进行重新布局，使得每个小项都适应一页，以避免在一个小项被截断时导致内容2无法在内容1之后新开一页。

使用JavaScript进行分页控制：如果以上方法无法满足需求，您可以尝试使用JavaScript来控制分页。您可以通过测量内容1中各个小项的高度，并在适当的位置插入分页符。

以下是使用JavaScript进行分页控制的示例：

html
Copy code
<script>
window.onload = function() {
var content1 = document.querySelector('.content1');
var content2 = document.querySelector('.content2');

    var content1Height = content1.offsetHeight;
    var content2Top = content1.offsetTop + content1Height;

    // 检查内容2是否需要新开一页
    if (content2.offsetTop !== content2Top) {
        var pageBreak = document.createElement('div');
        pageBreak.style.pageBreakBefore = 'always';
        content1.appendChild(pageBreak);
    }
}

</script>

<div class="content2">

</div>
这段JavaScript代码会在页面加载完成时执行，检查内容2是否需要新开一页，并根据需要在内容1末尾插入分页符。

请注意，这只是一种可能的解决方案，具体效果可能会因您的HTML和CSS结构而异。您可能需要根据实际情况进行适当的调整和优化。

希望这些提示能帮助您解决强制分页的困难。如果您有其他问题，请随时提问。

Technologyforgood | 园豆：7688 (大侠五级) | 2023-07-12 22:27

清除回答草稿

您需要登录以后才能回答，未注册用户请先注册。

欢迎，请先 登录 或者 注册 。

使用wkhtmltopdf把html字符串转成pdf时强制分页遇到困难

欢迎，请先登录或者注册。