2017-07-03 35 views
0

我有以下一個HTML文件(包括款式/腳本):FQ.html如何避免大HTML表格中的文字分頁(打印/ PDF)?

我有以下問題: lame page breaks

我已經在解決方案的嘗試迭代,爲其最新嘗試有以下一些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-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%。

防止文本或文本出現中斷,最好是文本。

回答

0

您必須將page-break-beforepage-break-after規則應用於文檔中的所有元素。

例如,對於表格,您可以使用table tr和類似的選擇器。