如何使用 CSS 和 JavaScript 覆蓋預設瀏覽器列印設定？

停用網頁列印輸出的預設瀏覽器列印設定

許多Web 開發人員都在尋求解決方案來修改預設瀏覽器列印設定，特別是頁首、頁尾和頁邊距。本文旨在全面了解跨不同瀏覽器透過 CSS 和 JavaScript 提供的選項。

CSS 解決方案

CSS 中的 @page 指令提供進階格式設定用於分頁媒體（例如紙張）的選項。它允許您專門為頁面指定印表機邊距，而與元素邊距無關。

@page {
    margin: 0mm;
}

但是，對此指令的支援因瀏覽器而異。雖然 Safari、Internet Explorer、Opera 和 Chrome 等瀏覽器支援設定印表機頁邊距，但 Firefox 仍然不支援。

自訂分頁符號和內容邊距

除了列印邊距，您可以使用CSS 控制分頁符號和內容邊距，以刪除頁眉和頁腳。

body {
    margin: 10mm 15mm 10mm 15mm;
}

當列印時，瀏覽器將抑製正文邊距指定區域的內容，從而有效隱藏頁眉和頁腳。但請注意，這僅在列印內容適合單頁時才有效。

瀏覽器行為

這些設定的行為因瀏覽器而異。

• Internet Explorer：設定正確的列印邊距，但以不透明背景顯示瀏覽器頁眉/頁腳，隱藏
• Firefox：正確定位內容，但同時顯示瀏覽器頁首/頁尾文字和內容文本，導致混合顯示。
• Opera：隱藏頁首但邊距設定不正確，導致潛在的頁首可見度問題。
• Chrome：如果頁邊距與其位置衝突，則隱藏瀏覽器頁眉/頁腳，提供隱藏這些內容的最佳實現

結論

雖然CSS 提供了解決列印設定的機制，但瀏覽器支援和行為有所不同。 Chrome 在隱藏頁首和頁尾方面表現出了最理想的行為。然而，如果跨瀏覽器的一致性至關重要，則可能需要考慮替代解決方案。

以上是如何使用 CSS 和 JavaScript 覆蓋預設瀏覽器列印設定？的詳細內容。更多資訊請關注PHP中文網其他相關文章！