Question

当我点击按钮时，触发器打印数据没有中断。在考虑它时，它是一个不同的窗口。如何将这一点CSS添加到新窗口？有任何想法吗。感谢。

编辑：原来是什么让它在ctrl + p打印屏幕上正确，这是在选项卡内部

＆＃13;

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

＆＃13;

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

＆＃13;

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}

＆＃13;

Answer 1

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

divToPrint.style.pageBreakInside = "auto";

您需要获取tr，thead和tfoot对象并应用上面列出的样式。显示是相同的，page-break-after是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();
}

newWindow中的表中断

1 个答案: