Разрыв страницы в Wkhtmltopdf

Я использую инструмент WKHTMTOPDF для преобразования веб-страниц в PDF, и он отлично работает, за исключением некоторых проблем с разрывом страницы.

Как я положил стиль

page-break-before: always;

для таблицы, и это прекрасно работает. в то время как для предотвращения разрывов страниц я использовал:

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%


php html css page-break wkhtmltopdf
person Harshal Mahajan    schedule 12.02.2015    source источник
comment
что произойдет, если вы упакуете его в другой div? Был бы полезен более полный фрагмент HTML.   -  person z--    schedule 14.08.2015

Ответы (2)


arrow_upward
4
arrow_downward

Может быть, слишком поздно отвечать на этот вопрос, но это может помочь кому-то с той же проблемой.

Кажется, что разрыв страницы не происходит, когда родительские элементы div плавают в некоторых версиях htmltopdf. Немного больше информации и пример использования:

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

person Maximiliano Felice    schedule 29.12.2015

arrow_upward
0
arrow_downward

используйте эти классы для разрыва страницы:

<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>

Строки таблицы ломаются... Это работает :)

person GMK Hussain    schedule 26.06.2018