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

【问题标题】：How to add Print headers and footers in HTML, CSS and JavaScript?如何在 HTML、CSS 和 JavaScript 中添加打印页眉和页脚？
【发布时间】：2011-07-12 13:16:37
【问题描述】：

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

【问题讨论】：

Web 技术本身不支持此功能。您可以尝试这样做：（1）在页面上使用
作为页眉，另一个作为页脚，（2）定义不同的样式表用于显示和打印； (3) 在显示样式表中，为这些 div 设置display:none； (4) 在打印样式表中，设置display:block.
HTML Print Header & Footer的可能重复

标签： javascript html css printing

【解决方案1】：

这是我发现的：

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

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

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

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

【讨论】：

通常，您可以通过将 CSS 放在顶部来覆盖原始页眉和页脚。

【解决方案2】：

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

【讨论】：

先生有什么办法可以打印。每页至少 15 条记录是可能的。给一些提示...