如何在網路報告的每一頁上實現自訂頁首和頁尾的一致列印？-css教學-PHP中文網

如何在網路報告的每一頁上實現自訂頁首和頁尾的一致列印？

Barbara Streisand

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

原創

849 人瀏覽過

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>

登入後複製

處理印刷媒體

處理印刷媒體

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

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

登入後複製

處理印刷媒體

處理印刷媒體
要確保這些元素僅在列印中顯示，請利用@media 規則：

這將抑制頁眉和頁腳顯示支援和瀏覽器注意事項截至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中文網其他相關文章！