HTML 页眉/页脚打印功能答案

【问题标题】：HTML header/footer print capabilitiesHTML 页眉/页脚打印功能
【发布时间】：2011-06-20 16:35:05
【问题描述】：

我正在努力为我们的 Mediboard 项目提供完整的 HTML 页眉/页脚打印功能。

从长远来看，我知道 CSS3 页面媒体模块将满足我的需求，但至少需要两三年的时间。

所以我尝试让它与 CSS2 功能一起使用，它几乎可以在 printable document 上看到。然而，我仍然对在页脚下打印内容的页脚有限制（请参阅第 3-4 页的打印预览）。

虽然我很确定 div.body 的 padding-bottom 用于使它在 Firefox 2 中工作。

无论如何，有人有什么棘手的线索可以帮助我解决这个问题吗？

编辑：为了提供更多详细信息，我们目前通过使用以position: fixed、top:0 或bottom:0 定位的元素来设置页眉和页脚，具体取决于它是页眉还是页脚。这很好用，打印时，这些元素会在每一页的正确位置重复（参见“可打印文档”示例）。唯一的问题是当发生分页时，文本被绘制在这些元素后面（参见第 3/4 页）

EDIT2：更新了文档的 URL

【问题讨论】：

Fabien，你能告诉我你在哪些浏览器上工作吗？我刚刚检查了谷歌浏览器 8.0.552.237，打印预览只在最后一页的底部显示页脚。
您能否描述一下您的解决方案 Fabien，不胜感激！该文档的链接已失效：/
我更新了网址。我们没有找到解决方案，我们现在使用基于HTML到PDF转换的PDF生成器（实际上是dompdf或wkhtmltopdf，取决于服务器配置）。
我在 Firefox 上使用它，但在 Chrome v24.0.1312 上它只在首页打印页眉和页脚。

标签： html css printing header footer

【解决方案1】：

看起来 CSS2 有一个 @page 规则，您可以在其中定义页面大小和边距：

@page { size:8.5in 11in; margin: 6em 1em 2em }

-或-

@page { size:auto; margin: 6em 1em 2em }

很遗憾，我没有时间测试它，但我很想知道它是否有效。我可以使用它。

我喜欢您对页眉/页脚的计划。干得好:)

【讨论】：

【解决方案2】：

根据我的经验，分页符在元素中不起作用。如果诸如 [p][/p] 之类的元素跨越两个打印页面，则 HTML 代码不知道页面之间发生中断的位置。这是因为用户可以将自己的打印机边距设置为 1 或 1.75 英寸或其他值。无法通过 CSS 设置实际的打印机边距。 CSS 只能设置 HTML 页面的边距和填充——设置为“打印机”定义的边距。不会将有关打印机设置的信息（例如边距）发送到浏览器。这解释了为什么内容被覆盖在标题下，因为浏览器不知道页面提要何时发生。最简单的解决方案是在第一页上显示标题信息，但这不是您想要的。蛮力方法是插入分页符 [br style="page-break-before: always;" /] 在段落中的适当位置，但是，这对于大量文档是不切实际的。此外，包括同一制造商的打印机在内的打印机之间的细微差别也有细微差别 - 例如，一个打印件可能会打印恰好适合一页的内容，即使两台打印机具有相同的边距，下一个打印机也可能在下一页上具有最后一行设置。但是，对于表格信息（[table][/table]），分配这样的 CSS 很容易将表格保持在一起。我推测可以计算页面上的字符并通过 javascript 动态插入分页符（如果您使用 JQuery，很容易）来近似蛮力方法。

【讨论】：

【解决方案3】：

您最有可能希望实现媒体类型。请参阅http://www.w3.org/TR/CSS2/media.html 了解更多信息。您可以将一个没有浮动页脚的 CSS 表用于打印，而将另一个用于屏幕。

<LINK REL="stylesheet" TYPE="text/css" MEDIA="print, handheld" HREF="foo.css">

这是一个例子。

如果不需要，您也可以考虑在打印页面上使页脚不可见。

【讨论】：