在每页上打印具有非重叠页脚的多页HTML表

Question

我不知疲倦地搜索，虽然我发现很多人都在询问这个问题，但似乎没有任何一致的解决方案。

我们有一个页面，用户可以在其中输入日期范围，然后按“提交”返回数据表。 A＆＃34;打印＆＃34;存在按钮，显然打印生成的数据。

所有浏览器似乎都能够按预期将长表拆分为多个页面。我们还可以通过使用带有一些CSS的页脚div来获取一些预定义的页脚文本以显示在每个页面上：

.footer {
    position: fixed;
    bottom: 0;
}

唯一的问题是表格行的高度不一致，所以在某些页面上页脚有足够的空间，但在其他页面上，表格和页脚重叠。

我尝试过的事情：

@page {
    margin-bottom: 10mm;
}

添加一个边距，但页脚的bottom: 0;固定位置现在被认为太高了，即它仍然是重叠但页面底部有一堆空格。将bottom属性设置为负值只会使其显示在下一页的顶部。

@page {
    padding-bottom: 10mm;
}

根本没有明显效果。

......而这几乎是我所能想到的。我们能做些什么呢？我们是否需要某种自定义JS解决方案来计算每页上的行数并手动插入页脚？必须有人在印刷页脚方面取得成功;它似乎并不是一个不常见的要求。

Answer 1

可能有更优雅的解决方案，但您可以在JS中使用以下算法执行此操作：

while there is still vertical room left...
   output a row to DOM
   measure height of new row and recalc how much vertical room is left

要获得元素的高度，您可以查看this other answer。

这可能看起来很痛苦，但是您可以对渲染进行大量控制，并且它应该可以正常工作。

Answer 2

请尝试在css文件的底部或最后body影响规则最后添加!important后添加：

@media print {
  body {
    padding-bottom: 10mm;
  }
}

Answer 3

我昨天搜寻几个小时来解决这个问题时，我遇到了同样的问题。解决的办法是 将这些添加到CSS。

thead { display: table-header-group }

tfoot { display: table-row-group }

tr { page-break-inside: avoid }

ps：永远不要在表格中添加相对位置，因为它无法正常工作。