有没有办法在每个页面上打印网页页眉/页脚？
[英]Is there a way to get a web page header/footer printed on every page?
问题描述
根据我的研究，似乎我想做的事情是不可能的，但是如果事情发生了变化，我想检查是否有人想出办法来做到这一点。
我有一个Web应用程序，它根据浏览器窗口中的用户选择生成打印报告。 我有一个自定义页眉和页脚，当从浏览器打印报告时，应在每个打印页面上重复。 它不是我需要的浏览器页眉和页脚，而是我生成的自定义页眉和页脚。 另外，我不认为这是CSS和媒体类型的问题，但我不是CSS专家。 我没有问题让页眉和页脚打印一次，但我不能让它们在每页上打印。 我已经读过，如果我使用表重新创建报表页面，然后使用表头标记和CSS，这可能至少可以在每个页面上获取标题。 我还没有成功，但如果它是唯一的选择，我会再试一次。 一位同事建议我在我的php中计算行数并根据需要手动输出页眉和页脚。 我想这是一个选项，但它似乎应该有一种方法来做到这不是那么“蛮力”！
另一个需要注意的是我必须支持IE 6，所以我怀疑我尝试过的一些CSS东西是不受支持的。
如果有人知道如何做到这一点，那将是伟大的！ 如果没有，我将不得不重新考虑我的方法。
提前致谢！
更新（2011年12月14日）
我在这个问题上取得了相当大的进步，并且使用了答案中的一些信息，我确实生成了可用的报告，但从未如我所希望的那样好或专业。 页脚的页面底部往往不够近，我不得不做大量的猜测工作和关于插入分页符决定大文本的“脆弱”计算，我只能支持限制页面格式集，以及对报告的任何更改都会导致一系列代码更改，但更加脆弱的计算。 总有一种情况打破了某些报道的某些部分。 我们重新审视了这些要求， 现在使用TCPDF生成报告为PDF 。 文档有点不透明，需要进行一些实验，但结果要好得多，现在报告应该显示出来。 我会对任何试图从浏览器做HTML报告的人说，除非它们非常简单，省去挫折（正如其他人在这里告诉我的那样）并使用PDF或类似的东西。
4 个解决方案
解决方案1
33 已采纳 2009-11-12 15:32:54
它可以通过表来完成 - 而且我知道我将通过建议使用表格进行布局来冒险进行投票 - 但我们在这里谈论IE6并不是因为其出色的CSS支持而闻名:-)
如果您设置CSS样式如下：
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
然后，当您创建HTML时，将您的身体渲染为：
<body>
<table>
<thead><tr><td>Your header goes here</td></tr></thead>
<tfoot><tr><td>Your footer goes here</td></tr></tfoot>
<tbody>
<tr><td>
Page body in here -- as long as it needs to be
</td></tr>
</tbody>
</table>
</body>
是的它不好（表格与CSS），它不是理想的，但（对你而言很重要）它确实适用于IE6。 我无法对Firefox发表评论，因为我没有在那里测试过，但它应该可以完成这项工作。 这也将处理不同大小的页面，不同的字体大小等，所以它应该“正常工作”。
如果您希望页眉和页脚仅出现在打印介质上，请使用@media参数执行正确的操作：
@media print {
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
}
@media screen {
thead { display: none; }
tfoot { display: none; }
}
注意
截至2015年7月，这仍然只适用于Firefox和IE。
基于Webkit的浏览器（参见Chrome，Safari）在他们的问题跟踪器中存在长期存在的错误，如果有人有足够强烈的投票支持他们：
这个问题下面的评论告诉我现在Chrome已经解决了。 我没有检查过自己:-)
针对Chrome的原始错误（供参考）是：
解决方案2
5 2009-11-12 14:17:03
这将适用于某些浏览器，而不是全部。 我不认为有一个优雅的跨浏览器解决方案
在页面上的div中包含所需的打印页脚/页眉（在此示例中为div id ='printableFooter'）
在屏幕css文件中放：
#printableFooter {display: none;}
在print css文件中：
#printableFooter {display: block; position: fixed; bottom: 0;}
解决方案3
5 2009-11-12 14:20:11
我建议将页面分成表格，并将标题部分添加到第一行，将页脚部分添加到最后一行。 第一行和最后一行之间的行的内容可以动态更改，因此您将获得所需页面的常量页眉和页脚。
----------
ROW1 HEADER
----------
ROW2
Insert dynamic contents here
ROW N-1
----------
ROW N Footer
解决方案4
3 2009-11-12 15:17:02
尝试生成（rtf | pdf）文档进行打印
如何在Web文档的每个打印页面上添加页眉和页脚（无浏览器限制）？
[英]How to add a header and footer to each printed page of a web document (without browser restriction)?
创建页脚，但在每个页面中与打印文档中的CSS不同
[英]Make a footer but in every page different with CSS in a printed document
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.