HTML页眉/页脚打印功能

时间:2011-02-03 13:50:51

标签: html css printing header footer

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

长期来看,我知道CSS3 Page Media模块将满足我的需求,但距离至少还有两三年的时间。

所以我尝试使用CSS2功能,它几乎可以在这个printable document上看到。然而,我仍然限制在页脚下打印内容的页脚(参见第3-4页打印预览)。

虽然我很确定div.body的填充底部曾经使它在Firefox 2中运行。

无论如何,有人有一个棘手的线索来帮助我解决这个问题吗?

编辑: 为了提供更多详细信息,我们目前使用position: fixed定位的元素以及top:0bottom:0来确定页眉和页脚,具体取决于它是页眉还是页脚。这很有效,在打印时,这些元素会在每个页面的正确位置重复出现(请参阅“可打印文档”示例)。唯一的问题是当发生分页时,文本将在这些元素后面绘制(参见第3/4页)

EDIT2:更新了文档的网址

4 个答案:

答案 0 :(得分:4)

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

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

-OR -

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

不幸的是我没时间测试它,但我很想知道它是否有效。我可以用它。

我喜欢您使用页眉/页脚计划的内容。干得好!)

答案 1 :(得分:3)

有一个很好的答案here涉及表格。它完全符合您的要求,甚至可以在IE6中运行。

答案 2 :(得分:1)

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

答案 3 :(得分:-3)

您最希望实现媒体类型。有关详细信息,请参阅http://www.w3.org/TR/CSS2/media.html。你可以有一张没有浮动页脚用于打印的CSS表格,另一张用于屏幕。

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

这是一个例子。

如果您不需要,也可以考虑在打印页面上隐藏页脚。