如何使用 CSS 從頁面停用瀏覽器列印選項（頁首、頁尾、邊距）？
Aug 30, 2023 pm 02:01 PM
我們可以透過CSS來控制列印預覽頁面的頁首、頁尾和邊距，甚至可以實現所需的分頁媒體佈局和方向。我們將使用@page指令來實現我們的結果。
在瀏覽器中預覽列印頁面時，我們可以看到一些額外的頁面信息，如頁面標題、頁面預覽日期和時間，以及預覽中的頁面編號，這些都顯示在頁面的頁眉和頁腳中。我們也可以看到頁面預覽媒體上應用了一些額外的邊距。
文法
@media print {
@page {
/* Desired CSS */
}
}
Explanation
的中文翻譯為：解釋
在這個方法中，我們將在@media列印規則內使用@page at規則（或指示），該規則由CSS提供，允許我們在分頁媒體上套用格式，其中包括螢幕上可見的頁面、論文等
借助@page指令，我們可以控制列印頁面的佈局、設計、邊距、方向，甚至特定頁面的設計。該指令廣泛用於設計離散（分頁）媒體。
分頁媒體與通常的連續媒體（如網站）不同，因為在分頁媒體中，如果內容溢出，它會被分成單獨的頁面。我們仍然可以透過@page指令的偽類來控制頁面的佈局。
Example 1
的中文翻譯為：範例 1
在這個範例中，我們將透過在@paged指令內將邊距設為「0」來刪除分頁媒體中可見的頁首、頁尾和額外邊距。
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>How to disable browser print options (headers, footers, margins) from the page with CSS?</title>
</head>
<style>
@page {
margin: 0;
}
</style>
<body>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat
magni hic distinctio ea est, recusandae dolores in eum cum velit adipisci
aperiam non ullam culpa quae maiores dignissimos, tempora, quod exercitationem
reiciendis molestiae temporibus veniam pariatur quo? Ut similique doloremque
repudiandae. Maiores iure quam ex. Cumque, laudantium debitis dolorem,
rerum consequatur tempore dignissimos nostrum officiis nam minima omnis
</p>
</body>
</html>
按 command p（在 Mac 中）或 ctrl p（在 Windows、Linux 中）查看列印預覽畫面
範例 2
在此範例中，我們將從分頁媒體中刪除瀏覽器列印選項，但將邊距新增至分頁媒體畫面中的正文元素。
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>How to disable browser print options (headers, footers, margins) from the page with CSS?</title>
</head>
<style>
@media print {
@page {
margin: 0;
}
body {
margin: 2rem;
}
}
</style>
<body>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat
magni hic distinctio ea est, recusandae dolores in eum cum velit adipisci
aperiam non ullam culpa quae maiores dignissimos, tempora, quod exercitationem
reiciendis molestiae temporibus veniam pariatur quo? Ut similique doloremque
repudiandae. Maiores iure quam ex. Cumque, laudantium debitis dolorem,
rerum consequatur tempore dignissimos nostrum officiis nam minima omnis
</p>
</body>
</html>
按 command p（在 Mac 中）或 ctrl p（在 Windows、Linux 中）查看列印預覽畫面
結論
在本文中，我們了解了 @paged CSS 指令，以及如何使用該指令僅使用 CSS 從列印預覽中刪除/停用瀏覽器列印選項。
以上是如何使用 CSS 從頁面停用瀏覽器列印選項（頁首、頁尾、邊距）？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱門文章
熱門文章
熱門文章標籤
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
