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

我们可以通过CSS控制打印预览页面的页眉、页脚和边距，并且甚至可以实现所需的页面媒体布局和方向。我们将使用@page指令来实现我们的结果。

在浏览器中预览打印页面时，我们会看到一些额外的页面信息，如页面标题、页面预览日期和时间，以及预览中的页面号码，这些都存在于页面的页眉和页脚中。我们还会看到一些额外的页眉和页脚应用于页面预览媒体的边距。

语法

@media print {
   @page {
      /* Desired CSS */
   }
}

说明

在这个方法中，我们将使用CSS提供的@media print规则中的@page指令，它允许我们在分页媒体上应用格式，包括屏幕、纸张等。

借助@page指令，我们可以控制打印页面的布局、设计、页边距、方向甚至特定页面的设计。该指令在设计离散（分页）媒体时广泛使用。

分页媒体与常规连续媒体（如网站）不同之处在于，如果内容溢出，它会被分成不同的页面。我们仍然可以借助@page指令的伪类来控制页面的布局。

示例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

在此示例中，我们将从分页媒体中移除浏览器的打印选项，但会在分页媒体屏幕中为 body 元素添加边距。

<!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上) 可以查看打印预览屏幕