如何在网络报告的每一页上实现自定义页眉和页脚的一致打印？-css教程-PHP中文网

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

Barbara Streisand

发布： 2024-10-25 11:42:02

原创

773 人浏览过

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 中的这些问题。请参阅下面提供的错误报告以获取更多信息：