如何避免wkhtmltopdf表格行内换页
我是用一个表的从html页面生成pdf报告。
为此，我使用了wkhtmltopdf。
当生成pdf时，它在tr 中的任何位置中断。
我想避免这种情况。
回答 18
Stack Overflow用户
发布于 2013-09-01 02:43:57
这是老帖子，但由于我浪费了很多时间试图找到适当的解决方案，我会把它放在这里，也许它会对某些人有用。
所以从我所读到的，问题是
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>会像预期的那样工作。
我有一些更复杂的行距情况，所以上面的解决方案是将它打破和平，这并不是预期的效果。我为每行跨行的行集使用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;
}我不知道是否一切都是必要的，我不认为它是完美的，但它可以完成工作。仅在chrome上测试
Stack Overflow用户
发布于 2015-09-15 20:25:06
从0.12开始，这个问题已经得到了解决，但是，有时候，当一个表格太长而不能容纳在页面中时，wkhtmltopdf会将其分成两部分，并在新页面上重复列标题，这些列标题会显示为与第一行重叠。
我在wkhtmltopdf github问题部分找到了这个问题的临时解决方案：https://github.com/wkhtmltopdf/wkhtmltopdf/issues/2531
只需将以下代码行添加到视图css：
tr {
page-break-inside: avoid;
}Stack Overflow用户
发布于 2018-01-10 16:31:55
我已经深入研究这个问题好几天了，最终找到了完美的解决方案。你可以参考这个项目的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，你一定想知道这些如果您希望gist for wkhtmltopdf，请查看要点
https://stackoverflow.com/questions/13516534
复制相似问题