wkhtmltopdf page-break-before div 在新页面中有空格，div 未显示答案

【问题标题】：wkhtmltopdf page-break-before div have whitespace in new page, div not shownwkhtmltopdf page-break-before div 在新页面中有空格，div 未显示
【发布时间】：2015-03-18 19:57:37
【问题描述】：

我正在从生成的 html 文件中使用 wkhtmltopdf 生成 PDF。我为 windows 使用最新的 wkhtmltopdf 版本 (0.12.2.0)。

我的额外 wkhtmltopdf 参数是：

--zoom 1.0
--encoding "UTF-8"
--page-offset -1
--footer-html "C:\tmp\footer.html"
--header-html "C:\tmp\header.html"
--header-spacing 10
--footer-spacing 10 toc
--xsl-style-sheet "C:\tmp\toc.xsl"

在 footer.html、header.html、toc.xsl 中没有任何关于分页符的定义。 HTML 是有效的。每个打开的标签都以正确的顺序关闭。我检查了两次。

如果我插入分页符-after div 一切正常。但我也需要一个分页符-before。如果我插入一个分页符-before div，它也会破坏页面，但在新页面上会有一块空白，并且不会显示 div。

<div style='page-break-before: always; height: 10px; width: 100%; background-color: red;'>
 <span style='color:rgb(0, 0, 0)'>OOO</span>
</div>

这个样式属性有没有设置都没有关系："height: 10px; width: 100%;"

这两个页面应该是这样的：

+--------------------+
|                  1 |
|   xxxxxxxxxxxxxx   |
|   xxxxxxxxxxxxxx   |
|   xxxxxxxxxxxxxx   |
|   xxxxxxxxxxxxxx   |
|   xxxxxxxxxxxxxx   |
|   xxxxxxxxxxxxxx   |
|   xxxxxxxxxxxxxx   |
|   xxxxxxxxxxxxxx   |
|                    |
|                    |
|                    |
+--------------------+
-
+--------------------+
|                  2 |
|   OOOOOOOOOOOOOO   |
|   xxxxxxxxxxxxxx   |
|   xxxxxxxxxxxxxx   |
|   xxxxxxxxxxxxxx   |
|   xxxxxxxxxxxxxx   |
|   xxxxxxxxxxxxxx   |
|   xxxxxxxxxxxxxx   |
|                    |
|                    |
|                    |
|                    |
+--------------------+

但它们看起来像（未显示 div 并且下一页上有大空白）：

+--------------------+
|                  1 |
|   xxxxxxxxxxxxxx   |
|   xxxxxxxxxxxxxx   |
|   xxxxxxxxxxxxxx   |
|   xxxxxxxxxxxxxx   |
|   xxxxxxxxxxxxxx   |
|   xxxxxxxxxxxxxx   |
|   xxxxxxxxxxxxxx   |
|   xxxxxxxxxxxxxx   |
|                    |
|                    |
|                    |
+--------------------+
-
+--------------------+
|                  2 |
|                    |
|                    |
|                    |
|                    |
|   xxxxxxxxxxxxxx   |
|   xxxxxxxxxxxxxx   |
|   xxxxxxxxxxxxxx   |
|   xxxxxxxxxxxxxx   |
|   xxxxxxxxxxxxxx   |
|   xxxxxxxxxxxxxx   |
|                    |
+--------------------+

x-es 是文本的占位符。 O-s 是我的 div 的占位符。

我已经从答案 1 中尝试过这个。wkhtmltopdf page-break-after have whitespace 空格已经存在。

更新：

在我生成的其他一些 PDF 中，还有一些文本。我不知道为什么 wkhtmltopdf 有时会出现一些空白，有时它会将一个文本放在另一个文本上，但是如果我设置了 css 属性：

overflow-x: visible !important;

在我的 CSS 文件中。然后在 PDF 中不再有无意义的空白，也不再有一个文本覆盖另一个文本，但它使 不再有分页符。

解决方案：

主要问题是，我从其他工具收到的将其放入 wkhtmltopdf-tool 的 html 非常复杂，包含许多 div 块和无用的 html-tags，以至于 wkhtmltopdf-tool 出现了这个错误。使用干净的 html 它可以完美运行。

【问题讨论】：

标签： html whitespace wkhtmltopdf page-break

【解决方案1】：

在尝试解决类似问题数小时后，我发现解决方案是将页面立即放在正文中

<body>
<div style="page-break-inside: avoid;"> Here goes my page </div>
<div style="page-break-inside: avoid;"> Here goes my another page </div>
....
</body>

另一个警告是，如果内容大于页面 - 生成的 PDF 会中断。就像猫一样-“如果合适-它就坐”:)

尝试在页面之间移动内容，看看是否合适。

【讨论】：

【解决方案2】：

尝试定义页面大小（A4、A3、Letter），这个库也有自己的边距。所以你应该把它设置为0。

http://wkhtmltopdf.org/usage/wkhtmltopdf.txt

例如，请通过 jsfiddle 提供您的 html 示例。

【讨论】：

那行不通。我已经试过了（见我的问题最后一行）。
将边距设置为 0 对空白没有影响。（见我的问题）我写道，我通过 HTML 验证器检查了 HTML。