如何避免wkhtmltopdf表行内的分页符

我从一个表格生成HTML页面的PDF报告。

我正在使用wkhtmltopdf 。

当pdf生成时，它会打破tr标签中的任何地方 。

我想避免它。

更新17.09.2015：检查你使用的版本： wkhtmltopdf 0.12.2.4据说解决了这个问题（我没有检查）。

这是wkhtmltopdf中的一个已知问题。 webkit使用的分页algorithm（WKhtmltopdf中的WK）对于大型表格并不适用。我build议把表格拆分成更小的块，这些块更容易拆分成页面，并使用CSS很多：

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

也看看下面的wkhtmltopdf问题，他们有讨论比如表拆分问题的有趣的评论。有一个JS解决scheme，编程分割表中的168可能会帮助你（我不使用它）。

更新08.11.2013上面关于这个问题有很多讨论。有人设法编译支持更好的表破解的wkhtmltopdf版本，但不幸的是，它似乎没有正式发布，并可能包含其他错误。我不知道如何得到它，我不知道如何在Windows上编译，但是任何感兴趣的人都可以在这里查看示例（请参阅下面的新更新）。

更新24.02.2014你会很高兴听到在wkhtmltopdf 0.12这个function已被大大改善。然而，在开始使用任何新版本之前，等待0.12.1并进行彻底的testing，尽pipe使用反锯齿技术的新手们做得非常棒（ashkulz rocks），但它仍然有点不稳定！保持更新在wkhtmltopdf.org和github 。谷歌代码网站已经过时，正在慢慢迁移。

这是旧post，但由于我浪费了大量的时间来寻找适当的解决scheme，我会把它放在这里，也许这对某个人会有用。

所以从我读到的问题来看

 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，所以从上面的解决scheme是打破它的peaces，这是不希望的效果。我解决了它使用divs为每行rowspaned集。我的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; }

我不知道是否需要一切，我不认为它是完美的，但它是做的。仅在铬上进行testing

自0.12以来，这个问题已经解决了，但有时候，当表格太长而不能适应页面时，wkhtmltopdf将它分成两部分，重复新页面的列标题，这些列标题叠加到第一行。

我在wkhtmltopdf github问题部分find了这个问题的暂时解决scheme： https ： //github.com/wkhtmltopdf/wkhtmltopdf/issues/2531

只需将这些行添加到您的视图CSS：

 tr { page-break-inside: avoid; }

我发现wkhtmltopdf 0.12.2.1起，已经解决了这个问题。

你有桌子吗？和一个表体？

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

这是一个表的正确的格式，而大多数浏览器可以不在乎， 转换器就像你提到的那个，如果你缺less<tbody>或<th>标签，我build议你先尝试添加。

除了Nanotelep所说的之外，下面是手动表分页algorithm的工作实现。 https://github.com/AAverin/JSUtils/tree/master/wkhtmltopdfTableSplitHack

上面的答案对我不起作用。我不得不禁止缩放选项我的pdfkitconfiguration。

 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

我尝试了所有的方式来操作我的表格，但没有任何尝试可以停止将分页符放入行中。无奈之下，我尝试了不同的版本，并发现以下内容：

Wkhtmltopdf 0.12.2.1：不好

Wkhtmltopdf 0.12.3：不好

Wkhtmltopdf 0.12.1：好

我的解决scheme是降级到版本0.12.1，这解决了我的问题。当然，他们也许是因为我的html不是超强的OCD，但是由于HTML是在TinyMCE（用户）内部生成的，所以我没有太多的select。

此外，嵌套表不适用于我的任何版本。

在我的特定情况下，由于某种原因，以前的答案没有为我工作。结果工作实际上是几件事情的结合。

我安装了（在Ubuntu 16.04中）使用pip3 调用pdfkit的Wkhtmltopdf python包装，然后通过apt-get来安装 Wkhtmltopdf， 而我在这里安装了这个脚本的静态二进制文件（版本0.12.3）
添加了这个CSS（按照这里的答案中的build议）：
```
 tr, td div, th div{ page-break-inside: avoid; } 
```

然后按照这里的build议添加<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 🙂

我遇到了同样的问题，在经过大量的试用n错误之后添加了这个CSS来解决这个问题

tr { display: inline-table; }

对于还有这个问题的人来说，要记住的一点是桌子必须是身体的直接孩子，否则CSS将无法工作（至less这是我发生的事情）。

我发现这个荒谬的解决scheme，但它对我来说很好 🙂

我只是把这样一个非常长的rowspan列

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

然后表不会中断。

另一种select是：将每个tr放在自己的tbody ，然后将peage break css规则应用到tbody 。表支持多个tbody 。

有点额外的标记，但对我来说，体面的工作。

如何避免wkhtmltopdf表行内的分页符

为什么PDFKit / wkhtmltopdf挂起，但如果Rails应用程序被杀死，则按预期呈现PDF？

Wkhtmltopdf单行中的字符在页面之间部分切割