打印多页 HTML 表格，每页上都有不重叠的页脚答案

【问题标题】：Printing a multi-page HTML table with a non-overlapping footer on each page打印多页 HTML 表格，每页上都有不重叠的页脚
【发布时间】：2017-11-03 06:53:01
【问题描述】：

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

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

正如预期的那样，所有浏览器似乎都能够将长表分成几页。我们还可以通过使用带有一些 CSS 的页脚 div 来获得一些预定义的页脚文本以显示在每个页面上，如下所示：

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

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

我尝试过的事情：

@page {
    margin-bottom: 10mm;
}

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

@page {
    padding-bottom: 10mm;
}

完全没有明显效果。

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

【问题讨论】：

标签： javascript html css printing html-table

【解决方案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。

这可能看起来很痛苦，但是您可以很好地控制渲染，并且应该可以正常工作。

【讨论】：

当没有更多空间容纳另一行时应该怎么做？有没有办法为打印渲染插入分页符？
也许可以尝试使用 CSS 添加分页符，Keith。 ://www.w3schools.com/cssref/pr_print_pageba.asp
很遗憾，page-break-before: always 和 page-break-after: always 在 Chrome 中不起作用。 Chrome 对打印样式的处理是什么？有什么已知的解决方法吗？
我会开始一个新的问题，重点是这个。它有助于社区让您的问题一次只处理一个问题。
遇到此问题的任何其他人：如果您需要 Chrome 兼容性，JS 循环是唯一的方法。将thead保存在一个变量中（如果适用），遍历所有行，计算每行的高度，当它达到某个高度断点时，附加表格并移动到一个新的（每次都附加thead）。确保你的表有page-break-after: always，它应该可以工作。这远非优雅，但它是唯一适用于所有浏览器的东西。

【解决方案2】：

请尝试将其添加到 css 文件的底部或最后一个 body 影响规则之后，最终还添加 !important：

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

【讨论】：

【解决方案3】：

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

thead { display: table-header-group }

tfoot { display: table-row-group }

tr { page-break-inside: avoid }

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

【讨论】：