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

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

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

语法

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

解释

在这种方法中，我们将在@media打印规则内使用@page at-rule（或指令），它是由CSS提供的，允许我们在页面媒体上应用格式化，这包括在屏幕上可见的页面、纸张等。

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

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

例子1

在这个例子中，我们将通过在@paged指令中设置margin为 “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>