有没有办法在每个页面上打印网页页眉/页脚?
题
根据我的研究,似乎我想做的事情是不可能的,但如果发生了变化,我想检查一下是否有人想出了一种方法来做到这一点。
我有一个网络应用程序,可以根据浏览器窗口中的用户选择生成打印报告。我有一个自定义页眉和页脚,当从浏览器打印报告时,应在每个打印页面上重复该页眉和页脚。它不是我需要的浏览器页眉和页脚,而是我生成的自定义页眉和页脚。另外,我不认为这是 CSS 和媒体类型的问题,但我不是 CSS 专家。我可以将页眉和页脚打印一次,但无法在每一页上打印它们。我读过,也许如果我使用表格重新创建报告页面,然后使用表格头标签和 CSS,那么至少可以在每个页面上获取标题。我还没有成功,但如果这是唯一的选择,我会再试一次。一位同事建议我计算 php 中的行数,并根据需要手动放置页眉和页脚。我想这是一个选择,但似乎应该有一种方法来做到这一点,而不是那么“蛮力”!
另一个需要注意的是我必须支持 IE 6,所以我怀疑我尝试过的一些 CSS 东西只是不受支持。
如果有人知道有什么方法可以做到这一点,那就太好了!如果没有,我将不得不重新考虑我的方法。
提前致谢!
更新(2011 年 12 月 14 日)
我在这个问题上取得了相当大的进展,并且使用答案中的一些信息,我确实生成了可用的报告,但从未像我想要的那样好或专业。页脚往往距离页面底部不够近,我必须做大量的猜测工作和“脆弱”的计算来决定插入分页符的文本大小,我只能支持有限的一组页面格式,对报告的任何更改都会导致一系列代码更改和更脆弱的计算。总有一种情况会破坏某些报告的某些部分。我们重新修订了要求, 现在正在使用 TCPDF 生成 PDF 格式的报告. 。该文档有点不透明,需要进行一些实验,但结果要好得多,现在报告按其应有的样子显示。我会对任何尝试从浏览器中执行 HTML 报告的人说,除非它们非常简单,否则请避免让自己感到沮丧(正如其他人在这里告诉我的那样)并使用 PDF 或类似的东西。
解决方案
它可以用表格来完成——我知道我会冒着被否决的风险建议使用表格进行布局——但我们这里讨论的是 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 的原始错误(仅供参考)是:
其他提示
这会在某些浏览器工作,而不是不是全部。我不认为有一个优雅的跨浏览器溶液
包含你在页面上的div所需的打印页脚/报头(在该示例的div ID =“printableFooter”)
在屏幕的CSS文件放:
#printableFooter {display: none;}
在打印CSS文件:
#printableFooter {display: block; position: fixed; bottom: 0;}
我会建议表来划分页面,页眉部分添加到第一行和页脚部分的最后一排。的第一和最后行之间的行的内容可以动态改变,以便你会得到在所希望的页的恒定页眉和页脚。
----------
ROW1 HEADER
----------
ROW2
Insert dynamic contents here
ROW N-1
----------
ROW N Footer
尝试以产生(RTF | PDF),用于打印文件