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

Question

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

Answer 1

这是我发现的：

您可以使用position: fixed和top: 0或bottom: 0在每个页面的顶部/底部放置一个元素。但是，由于固定定位在 IE6 上不起作用，因此唯一的选择是使用具有100%高度和thead和的表格tfoot。它是某种神奇的作品，你想让它（有内容的方式thead，并tfoot出现在每一页上）。如果你不关心 IE6 就使用固定定位。

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

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

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