首頁 > 文章 > web前端 > 如何使用 CSS 從頁面停用瀏覽器列印選項（頁首、頁尾、邊距）？

如何使用 CSS 從頁面停用瀏覽器列印選項（頁首、頁尾、邊距）？

WBOY轉載: 2023-08-30 14:01:021108瀏覽

如何使用 CSS 从页面禁用浏览器打印选项（页眉、页脚、边距）？

我們可以透過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中文網其他相關文章！

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：CSSue-before 屬性下一篇：CSSue-before 屬性

看更多