newWindow中表中的分页

Question

当我单击该按钮时，触发器将打印数据，没有中断。一想到这是另一扇窗户。我怎样才能把这一点CSS添加到新窗口呢？任何想法。谢谢。

编辑:原来是什么使它在ctrl+p打印屏幕上右转的是它在选项卡内

​

table { page-break-inside:auto }
    tr    { page-break-inside:avoid; page-break-after:auto }
    thead { display:table-header-group }
    tfoot { display:table-footer-group }

​

​

function PrintData(){
   var divToPrint=document.getElementById("Table");
   newWin= window.open("");
   newWin.document.write(divToPrint.outerHTML);
   newWin.print();
   newWin.close();
  } 

​

​

style=table{page-break-inside:auto}tr{page-break-inside:avoid;page-break-after:auto}thead{display:table-header-group}tfoot{display:table-footer-group}

​

Answer 1

您需要在对象上设置样式属性。例如，要应用于您的表，可以添加：

divToPrint.style.pageBreakInside = "auto";

您将需要获得tr，头和脚的对象，并应用您已经列出的上述样式。显示是相同的和分页后是pageBreakAfter.

对于表行，可以执行如下操作：

var trs = divToPrint.getElementsByTagName('tr');
for (var i = 0; i < trs.length; i++) {
    trs[i].style.pageBreakInside = "avoid";
}

下面是您的示例的编辑版本。您需要在将HTML发送到新窗口之前进行更改。

function PrintData(){
   var divToPrint = document.getElementById("Table");
   divToPrint.style.pageBreakInside = "auto";
   var nTr = divToPrint.getElementsByTagName('TR')
   for(i=0; i<nTr.length; i++){
      nTr[i].style.pageBreakAfter = 'auto';
      nTr[i].style.pageBreakInside = 'avoid';
   }
   var nTh = divToPrint.getElementsByTagName('tHead');
   for(f=0; f<nTh.length; f++){
      nTh[f].style.display = 'table-header-group'
   }
   var nTf = divToPrint.getElementsByTagName('tFoot');
   for(g=0; g<nTf.length; g++){
      nTf[g].style.display = 'table-header-group'
   }
   newWin = window.open("");
   newWin.document.write(divToPrint.outerHTML);
   newWin.print();
   newWin.close();
}