打印数据表 - 新页面答案

【问题标题】：Print datatable - new page打印数据表 - 新页面
【发布时间】：2015-07-02 06:32:42
【问题描述】：

我正在尝试使用javascript 和css 打印我的数据表，如下所示：

<h:commandButton value="#{portal.btnPrint}" type="submit" onclick="javascript: window.print();"/>

<p:dataTable id="tbl" var="item" value="#{myPrins.model}" ...
...
</p:dataTable>

@media print
{
  table { font-size: 80%; }
  #menu, #header, #form, #form_error { display: none; } 
  @page { size: A4 landscape !important; }
  ....
  ....
}

而且，如果我理解它，它是基于 DOM 的打印，所以它只打印设置要打印并在屏幕上可见的内容。

问题是，我无法处理页尾：

我尝试过但拒绝的：

造型row heigth 或font size（问题在下一页再次出现）
按页打印表格（第 1 页 - 打印，第 2 页 - 打印 atc.）。大数据表的用户敌人
使用@media print { thead {display: table-header-group;} } 在每个页面上打印标题 - 它仅适用于 Firefox
导出到 XLS（由于其他原因我不能）
page-break-inside: avoid; 在 chrome 中不起作用

如何一次打印整个数据表并自动正确拆分页面？

【问题讨论】：

重复？ stackoverflow.com/questions/9288802/… 什么是 MFF？（谷歌没有与网络开发相关的结果）
我猜 MFF 代表 Mozilla FireFox。最好的办法是使用 CSS 或使用专门用于打印网页的适当库，例如 wkhtmltopdf。
Ahhhh... 对... MFF... 但是如果这些仅在 MFF 中有效，而不是基于 webkit 的浏览器，wkhtmltopdf 是否有效？我个人使用飞碟，效果很好

标签： javascript css jsf primefaces printing

【解决方案1】：

紧急解决方案：

Mozilla 火狐
css： @media print { tr { page-break-inside: avoid !important; } }

新问题和优势：

页眉自动出现在每一页上
表格的边框向左和顶部移动了一点（从第 2 页开始）
=> 我必须将表格的顶部和左侧边框加厚一点，以便在下一页上可见：

css: @media print { table { border-top: 3px solid #ACBECE; .. } }

【讨论】：