如何在 HTML、CSS 和 JavaScript 中添加打印页眉和页脚？

Question

我在 HTML 和 CSS 中有一个文档。 我想在每个打印页面中都有页眉和页脚，这样当您按打印时，每个页面都有相同的页脚和 header。 有没有办法使用 web 技术来做到这一点？ 除了 page-break-after 等之外，我找不到太多关于打印的信息。

Answer 1

这是我发现的：

您可以使用position: fixed and top: 0 or bottom: 0到 position每个页面顶部/底部的元素。 但是，由于固定定位在 IE6 上不起作用，唯一的选择是使用高度为100%的表格以及thead和tfoot 。 它是一种按您希望的方式工作的魔法（让thead和tfoot的内容出现在每个页面上）。 如果您不关心 IE6，请使用固定定位。

但是，固定定位也意味着您拥有的任何内容都可能在固定定位元素后面 go 。 因此，实际上，header 和页脚不占用任何空间。

您无法控制实际的页眉/页脚（例如打印的 URL）。 用户必须自己禁用这些。

痛苦的 HTML/CSS 打印的最佳替代方案是 PDF。 您可以控制每个页面的外观、它们的大小以及页眉/页脚。 缺点是打印速度较慢（生成 PDF 不如加载 HTML 页面快）以及使用一些 PDF 库的方式工作的痛苦。

Answer 2

您不能设置 header 和页脚，它是处理该部分的浏览器。