Javascript 如何避免大型HTML表格中文本的分页符(打印/PDF)?
我有以下单个HTML文件(包括样式/脚本): 我有以下问题: 我已经重复了解决方案的尝试,最新的尝试有以下一些CSSJavascript 如何避免大型HTML表格中文本的分页符(打印/PDF)?,javascript,html,css,pdf,page-break,Javascript,Html,Css,Pdf,Page Break,我有以下单个HTML文件(包括样式/脚本): 我有以下问题: 我已经重复了解决方案的尝试,最新的尝试有以下一些CSS @media print{ @page { size:1080px 1080px; margin: 0px; } .page-break-before { page-break-before: always; display:block; width:200%;} .page-break { display:block; page-break
@media print{
@page {
size:1080px 1080px;
margin: 0px;
}
.page-break-before { page-break-before: always; display:block; width:200%;}
.page-break { display:block; page-break-after: always; width:200%; }
}
…和Javascript
//set viewport height in print mode.
var height = 780; //screen.height;
//pick up the total table.
var table = $('#identification_section > table')[0];
//initialize the sum variable with height of title (h2 tag)
var sum = 24;
//loop all table rows including child tables
for (var i = 0, row; row = table.rows[i]; i++) {
//tr is the parent table row which may contain child table.
var tr = row;
if (tr.offsetHeight > height) { //if row's hight is bigger than viewport height, it contains child table.
var child_table = tr.cells[0].children[0];
if (child_table.className=="group-table") { //pick up child table.
var child_sum = 0;
for (var j=0, subrow; subrow = child_table.rows[j]; j++) {
var subtr = subrow; //pick up child table's row
child_sum += subtr.offsetHeight; // sum up the row's height.
if (child_table.rows[j+1]!=null) //check if next row is existing, not end row.
if (child_sum + child_table.rows[j+1].offsetHeight > height) { // if (sum of table rows so far + next row's height) > viewport height
//var temp = subtr.cells[0]; // pick up the first cell of row
child_table.rows[j+1].classList.add('page-break-before'); // set the page-break-before to next row.
subtr.classList.add('page-break'); // set the page-break to current row
child_sum = 0; // set the sum 0 for next page calculation.
}
}
}
}
sum += tr.offsetHeight; // sum up the height of parent rows.
//tr.cells[0].setAttribute('style', 'height:'+tr.offsetHeight+'px');
if (table.rows[i+1]!=null) // check if there is next row.
if (sum + table.rows[i+1].offsetHeight>height) { // if sum + next row'height is bigger than viewport row
//var temp = tr.cells[0];
table.rows[i+1].classList.add('page-break-before'); //set the page-break-before class to next row
tr.classList.add('page-break'); // set the page-break class to current row
sum = 0; //set the sum 0 for next page calculation.
}
}
然而,我仍然不知所措。我觉得避免在文本上突破比避免在文本上突破更容易。尽管如此,我尝试的解决方案仍存在2个或更多问题。第一个原因是断裂过度,第二个原因是,不知何故,有些断裂的宽度似乎不再设置为50%
最好防止文本或的分页符,最好是文本。您必须对文档中的所有元素应用
分页符之前的和分页符之后的规则
例如,对于表,您可以使用table tr
和类似的选择器。您必须对文档中的所有元素应用前分页符
和后分页符规则
例如,对于表格,您可以使用table tr
和类似的选择器