首页 > 文章 > web前端 > 如何在网络报告的每一页上实现自定义页眉和页脚的一致打印？

如何在网络报告的每一页上实现自定义页眉和页脚的一致打印？

Barbara Streisand原创: 2024-10-25 11:42:02773浏览

How can I achieve consistent printing of custom headers and footers on every page of a web report?

在每个页面上打印网页页眉和页脚

在打印的 Web 报告的每个页面上打印自定义页眉和页脚的可能性是一度被认为是遥不可及的。然而，最近浏览器功能的进步使这成为现实，尤其是 Mozilla Firefox 和 Internet Explorer。

使用表格实现页面分组

作为有效的方法是，可以将表格与 CSS 样式结合使用来实现所需的结果。通过实现以下 CSS 样式：

thead { display: table-header-group; }
tfoot { display: table-footer-group; }

您可以将特定的表格元素指定为页眉或页脚。这允许它们在每个打印页面上重复。

示例 HTML 结构

要实现此技术，请按如下方式构建 HTML：

<code class="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></code>

处理印刷媒体

要确保这些元素仅在打印中显示，请利用 @media 规则：

<code class="css">@media print {
    thead { display: table-header-group; }
    tfoot { display: table-footer-group; }
}

@media screen {
    thead { display: none; }
    tfoot { display: none; }
}</code>

这将抑制页眉和页脚显示

支持和浏览器注意事项

截至 2015 年，此技术在 Mozilla Firefox 和 Internet Explorer 中仍然有效。基于 Webkit 的浏览器（例如 Chrome、Safari）之前曾在这方面遇到过问题。不过，最近的更新缓解了 Chrome 中的这些问题。请参阅下面提供的错误报告以获取更多信息：

[WebKit Bug 17205](https://bugs.webkit.org/show_bug.cgi?id=17205)
[ Chromium 问题 24826](https://code.google.com/p/chromium/issues/detail?id=24826)
[Chromium 问题 99124](https://code.google.com/p /chromium/issues/detail?id=99124)

以上是如何在网络报告的每一页上实现自定义页眉和页脚的一致打印？的详细内容。更多信息请关注PHP中文网其他相关文章！

firefox css chrome safari html webkit print for while CGI using this display table https bug issue

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：How can I use jQuery to smoothly scroll to a specific section or target on a webpage using a button click?下一篇：Here are a few question-based titles that capture the essence of the article: * **How to Avoid Height Calculation Issues When Using `display: inline-block` and `position: absolute`?** * **Why Does Ab

查看更多