Wkhtmltopdf 中的分页符

Question

我正在使用 WKHTMTOPDF 工具将网页转换为 PDF，除了一些分页问题之外，它效果很好。

就像我已经设置了风格

page-break-before: always;

对于 Table 来说效果很好。为了避免分页符，我使用了：

page-break-inside: avoid 

它仅适用于某些 div。

请检查此快照是否存在问题。

更新：

这是圆形形状的 HTML 代码，它不能避免分页符。

<div style="float: left; position: absolute;
            top: -14px; right: -20px;
            border-radius: 50%; 
            border: 2px solid #fff; 
            background: #6a98f5; 
            font-size: 9px; 
            font-weight: bold; color: #fff;
            width: 34px; height: 34px;
            z-index: 99999; line-height: 30px;
            text-align: center;
            -webkit-box-sizing: border-box; -moz-box-sizing: border-box;
            box-sizing: border-box;">
                                            78%

Answer 1

现在回答这个问题可能有点太晚了，但它可能会对遇到同样问题的人有所帮助。

在某些版本的 htmltopdf 中，当父 div 浮动时，似乎不会发生分页。有更多信息和用例：

https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1604

Answer 2

使用此类进行分页：

<style type="text/css" media="screen,print">
       /* Page Breaks */

/***Always insert a page break before the element***/
       .pb_before {
           page-break-before: always !important;
       }

/***Always insert a page break after the element***/
       .pb_after {
           page-break-after: always !important;
       }

/***Avoid page break before the element (if possible)***/
       .pb_before_avoid {
           page-break-before: avoid !important;
       }

/***Avoid page break after the element (if possible)***/
       .pb_after_avoid {
           page-break-after: avoid !important;
       }

/* Avoid page break inside the element (if possible) */
       .pbi_avoid {
           page-break-inside: avoid !important;
       }

   </style>

如何编写 html 代码请参阅示例。

<div class="page1 pb_after">
   content 1...
</div>
<div class="page2 pb_before pb_after">
   content 2.... <table>...</table> 
</div>

表格行中断...它有效:)

Answer 3

您可以使用 bookjs-eazy 进行布局和分页控制。

用于确保页面不被截断，同时支持书签、目录、页面和页脚。与 wkhtmltopdf 兼容

在此输入链接描述