Question

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

就像我已经把风格

page-break-before: always;

for Table，效果很好。虽然为了避免分页，我使用了：

page-break-inside: avoid

仅适用于某些div。

请检查此快照以查找问题。 enter image description here

更新

以下是ROUND Shape的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>

表行中断...有效:)

Wkhtmltopdf中的分页符

2 个答案: