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

我正在从html页面生成pdf报告 。

我使用了 wkhtmltopdf

当生成pdf时,在有 tr 标记的地方都会分页。

我想避免这种情况。

时间:


page-break-inside: avoid



因此,对于简单的table css结构,


td div, th div{


 page-break-inside: avoid;


}



和 table 结构


<table>


....


<tr>


 <td><div>some text</div></td>


 <td><div>more text</div></td>


</tr>


....


</table>



将按预期工作。

我的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 上测试

...