html - 有没有办法在每一页上打印网页页眉/页脚?

标签 html css header printing footer

根据我的研究,我想做的事情似乎是不可能的,但万一发生了什么变化,我想看看是否有人想出办法来做到这一点。

我有一个网络应用程序可以根据用户在浏览器窗口中的选择生成打印报告。我有一个自定义页眉和页脚,当从浏览器打印报告时,应该在每个打印页面上重复。这不是我需要的浏览器页眉和页脚,而是我生成的自定义页眉和页脚。另外,我不认为这是 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 的原始错误(供引用)是:

关于html - 有没有办法在每一页上打印网页页眉/页脚?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1722437/

相关文章:

C++ header 和 CPP 包括

html - 使用 CSS 问题的样式

javascript - 获取动态创建的隐藏元素的实际长度

html - 中心对齐图像

css - 如何使用 ReactJS 触发 onClick 和 onHover CSS 动画?

PHP - 使用 header() 传递 POST 变量?

html - 当 flexbox 元素以列模式包装时,容器不会增加其宽度

javascript - 如何在 javaScript 中添加 JavaScript 变量作为 CSS 值

css - Chrome 上显示的框边框不规则

c++ - 模板运算符似乎因歧义而失败