Как избежать разрыва страницы внутри строки таблицы для wkhtmltopdf

Я создаю отчет в формате PDF с HTML-страницы с одной таблицей .

Для этой цели я использую wkhtmltopdf .

когда создается pdf, он ломается где угодно в теге tr .

Я хочу этого избежать.

Обновление 17.09.2015: проверьте версию, которую вы используете: говорят, что wkhtmltopdf 0.12.2.4 решает проблему (я не проверял) .

Это известная проблема в wkhtmltopdf. Алгоритм разбиения страниц, используемый webkit (WK в WKhtmltopdf), не очень хорошо работает для больших таблиц. Я предлагаю разбить таблицу на более мелкие части, которые легче разделить на страницы и много использовать css:

table, tr, td, th, tbody, thead, tfoot {
    page-break-inside: avoid !important;
}

Также обратите внимание на следующие вопросы wkhtmltopdf, у них есть интересные комментарии, в которых обсуждается, например, проблема разделения таблицы. Существует решение JS, которое программно разделяет таблицы на 168, что может вам помочь (хотя я его не использую).

• https://code.google.com/p/wkhtmltopdf/issues/detail?id=168
• https://code.google.com/p/wkhtmltopdf/issues/detail?id=9

Обновление 08.11.2013 Об этом много говорится в выпуске 168, ссылка на который приведена выше. Кому-то удалось скомпилировать версию wkhtmltopdf, которая поддерживает лучшее разбиение таблиц, но, к сожалению, кажется, что она официально не выпущена и может содержать другие ошибки. Я не знаю, как его получить, и я не знаю, как скомпилировать в Windows, но любой желающий может проверить, например, комментарий здесь (см. Новое обновление ниже).

Обновление 24.02.2014 Вам будет приятно узнать, что в wkhtmltopdf 0.12 эта функция, среди прочего, была значительно улучшена. Тем не менее, дождитесь появления 0.12.1 и тщательно протестируйте, прежде чем начинать использовать любую новую версию, она все еще немного нестабильна, хотя новые ребята, работающие с antialize, делают отличную работу (ашкулз качается)! Следите за обновлениями на wkhtmltopdf.org и github . Сайт с кодом Google устарел и медленно переносится.

Это старый пост, но так как я тратил много времени, пытаясь найти правильное решение, я помещу его здесь, возможно, он будет кому-то полезен.

Итак, из того, что я прочитал, проблема с

page-break-inside: avoid

в том, что это не работает. Но на самом деле, если вы установите его на элемент, который display:blockработает, как ожидалось (как отмечено где-то в SO). поэтому для простой структуры таблицы css с

td div, th div{
    page-break-inside: avoid;
}

и структура таблицы

<table>
....
<tr>
    <td><div>some text</div></td>
    <td><div>more text</div></td>
</tr>
....
</table>

будет работать как положено.

У меня был более сложный случай с rowspans, поэтому решение сверху разбивало его на части, что было нежелательным эффектом. Я решил это, используя div для каждого набора строк. Мой jquery js выполняет всю работу:

$(window).load(function () {
    var sizes = {};
    $('#the_table tr:first th').each(function (a, td) {         
        var w = $(td).width();
        if (sizes.hasOwnProperty('' + a)) {
            if (sizes['' + a] < w)
                sizes['' + a] = w;
        }
        else {
            sizes['' + a] = w;
        }
    });

    var tableClone = $('#the_table').clone();
    $('#the_table').replaceWith('<div class="container"></div>');

    var curentDivTable;
    var cDiv = $('.container');
    tableClone.find('tr').each(function (i, ln) {
        var line = $(ln);
        if (line.hasClass('main_row')) {
            var div = $('<div class="new-section"><table><tbody>')
            currentDivTable = div.find('tbody');
            cDiv.append(div);               
        }
        currentDivTable.append(line);
    });
    //optional - maybe in % its better than px
    var sum = 0;
    $.each(sizes, function (a, b) {
        sum += b;
    });
    var widths = {};
    $.each(sizes, function (a, b) {
        var p = Math.ceil(b * 100 / sum);
        widths['' + a] = p + '%';
    });
    //setup
    $('.container table').each(function (a, tbl) {
        $(tbl).find('tr:first td, tr:first th').each(function (b, td) {
            $(td).width(widths['' + b]);
        });
        $(tbl).addClass('fixed');
    });
});

css:

div.new-section {
    page-break-inside: avoid;
}
.container, .new-section, .new-section table.fixed{
    width: 100%;
}

.new-section table.fixed{
    table-layout:fixed;
}

Я не знаю, все ли нужно, и не думаю, что это идеально, но работает. Проверено только на хроме

Начиная с версии 0.12 эта проблема была решена, но иногда, когда таблица слишком длинная, чтобы поместиться на странице, wkhtmltopdf разбивает ее на две части и повторяет заголовки столбцов на новой странице, и эти заголовки столбцов появляются наложенными на первую строку.

Я нашел временное решение этой проблемы в разделе wkhtmltopdf github issues: https://github.com/wkhtmltopdf/wkhtmltopdf/issues/2531

Просто добавьте эти строки в свой просмотр css:

tr {
  page-break-inside: avoid; 
}

Я копался в этой проблеме несколько дней и наконец нашел идеальное решение. Вы можете сослаться на этот проект phpwkhtmltopdf . Загляните в каталог, articleи вы найдете 3 решения для 3 проблем. Короче говоря, окончательное решение - добавить стиль css

thead {
    display: table-row-group;
}
tr {
    page-break-before: always;
    page-break-after: always;
    page-break-inside: avoid;
}
table {
    word-wrap: break-word;
}
table td {
    word-break: break-all;
}

Если вы китаец, не стесняйтесь зайти на этот сайт关于 wkhtmltopdf ， 你 一定 想 知道 这些 Ознакомьтесь с сутью , если вы хотите, чтобы суть для wkhtmltopdf

Я обнаружил, что wkhtmltopdf 0.12.2.1 и более поздних версий устранила эту проблему.

В моем конкретном случае по какой-то причине ни один из предыдущих ответов у меня не работал. В итоге сработало сочетание нескольких вещей.

1. Я установил (в Ubuntu 16.04) оболочку python Wkhtmltopdf под названием pdfkit, используя pip3, а затем вместо установки Wkhtmltopdf через apt-get я установил статический двоичный файл (версия 0.12.3), следуя приведенному ниже сценарию, взятому отсюда

   #!/bin/sh
   
   sudo apt-get install -y openssl build-essential xorg libssl-dev
   wget http://download.gna.org/wkhtmltopdf/0.12/0.12.3/wkhtmltox-0.12.3_linux-generic-amd64.tar.xz
   tar -xJf wkhtmltox-0.12.3_linux-generic-amd64.tar.xz
   cd wkhtmltox
   sudo chown root:root bin/wkhtmltopdf
   sudo cp -r * /usr/
   

2. Добавлен этот CSS (как предлагается в одном из ответов здесь):

   tr, td div, th div{
       page-break-inside: avoid;
   }
   

3. А потом также добавить <thead>и <tbody>теги , как предложено здесь , а также (без них таблица будет по- прежнему перерыв в уродливом виде):

   <table>
       <thead>
           <tr>
               <th>Column 1</th>
               <th>Column 2</th>
           </tr>
       </thead>
   
       <tbody>
           <tr>
               <td>Value 1</td>
               <td>Value 2</td>
           </tr>
       </tbody>
   </table>
   

С этими изменениями я теперь могу успешно использовать шаблоны Mako для создания HTML, а затем передать его в Wkhtmltopdf и получить красиво разбитый на страницы PDF.

Я пробовал всевозможные манипуляции со своими таблицами, но ничто из того, что я пробовал, не могло помешать размещению разрывов страниц в середине строки. В отчаянии я пробовал разные версии и обнаружил следующее:

Wkhtmltopdf 0.12.2.1: Плохо

Wkhtmltopdf 0.12.3: Плохо

Wkhtmltopdf 0.12.1: Хорошо

Мое решение состояло в том, чтобы перейти на версию 0.12.1, что решило мои проблемы. Конечно, это могло быть отчасти из-за того, что мой html не был супер-ОКР, но поскольку HTML создается внутри TinyMCE (пользователями), у меня действительно нет особого выбора.

Также вложенные таблицы у меня не работают ни в одной версии.

Как использовать разрывы страниц внутри PDF без разрыва tr?

Вот решение, которое вы можете использовать в любом html файле ...

После запуска вашего tr вы должны взять div внутри tr и передать этот css в div:

<tr>
      <div style="page-break-inside:avoid !important; page-break-after:auto !important; overflow: hidden; display:block !important; width:100% ">
     </tr>

Я столкнулся с той же проблемой, добавленной после множества пробных ошибок, этот css решил проблему

tr {
    display: inline-table;
}

В дополнение к тому, что говорит Нанотелеп, вот рабочая реализация ручного алгоритма разбиения страниц таблицы. https://github.com/AAverin/JSUtils/tree/master/wkhtmltopdfTableSplitHack

Приведенные выше ответы не помогли мне. Мне пришлось специально отключить опцию масштабирования в моей конфигурации pdfkit.

PDFKit.configure do |config|

  config.default_options = {
    print_media_type: false,
    page_size: "A4",
    encoding: "UTF-8",
    ## Make sure the zoom option is not enabled!
    ## zoom: '1.3',
    disable_smart_shrinking: false,
    footer_right: "Page [page] of [toPage]"
  }

end

Для тех, у кого все еще есть проблемы с этим, нужно помнить, что таблица должна быть прямым потомком body , иначе css не будет работать (по крайней мере, так случилось со мной).

Я нашел это нелепое решение, но оно мне очень понравилось :)

Я просто поместил очень длинный столбец rowspan, как этот

<td rowspan="XXX TOTAL ROWS" style="width:0px"></td>

и тогда стол не сломается.

Другой вариант: поместите каждый trпо отдельности, tbodyа затем примените правила css peage break к файлу tbody. Таблицы поддерживают несколько tbodys.

Немного дополнительной разметки, но у меня работает прилично.

Я решил проблему, используя несколько предложенных решений.

Я обернул свою таблицу в div и определил следующий CSS.

.wrapping-div {
        display: block;
        page-break-inside: avoid !important;
    }

.wrapping-div table, .wrapping-div tbody, .wrapping-div tr, .wrapping-div td, .wrapping-div th {
        page-break-inside: avoid !important;
    }

Структура таблицы по завершении была определена в следующем примере:

<div class="wrapping-div">
 <table>
  <tbody>
   <tr>
    <th>
      header
    </th>
    <td>
      content
    </td>
   </tr>
  </tbody>
 </table>
</div>

Мне не нужно было создавать div внутри тегов td или th.

Важные вещи, которые я заметил, пытаясь решить проблему:

• Тело должно быть включено в таблицу
• У div должен быть display: block
• Когда таблица не помещается на странице, она автоматически перемещает всю таблицу на следующую страницу (я не пробовал эту таблицу с огромными таблицами)
• Если вы удалите из CSS только селектор «.wrapping-div table» , это позволит разделить таблицу на две страницы, но будет отображать ее правильно, не разбивая одну ячейку на две страницы (это похоже на поведение по умолчанию в Word )

Надеюсь, это поможет.

Я много боролся с этой проблемой, используя последнюю версию h4cc / wkhtmltopdf-amd64 версии 0.12.4, и, наконец, заставил ее работать, понизив версию пакета до 0.12.3!

Чтобы избежать разрыва страницы, мы можем использовать опцию css без разрыва страницы.

tr { page-break-inside: avoid; }

Разбейте любой контент (изображение / текст) и сделайте так, чтобы он появился на следующей странице

.sample-image { page-break-before: always; }

У тебя есть голова стола? а тело стола?

<table>
<tbody>
<tr><th>Name</th><th>Value</th></tr>
<tr><td>url</td><td>stackoverflow.com</td></tr>
<tr><td>ip</td><td>123.123.123.123</td></tr>
</tbody>
</table>

Это правильное форматирование таблицы, в то время как большинству браузеров все равно, конвертеры, подобные упомянутому вами, могут, если у вас отсутствуют теги <tbody>или <th>теги, я предлагаю вам сначала попробовать их добавить.