如何使用 CSS 在页面上禁用浏览器打印选项(页眉、页脚、边距)?

cssweb developmentfront end technology更新于 2025/1/25 19:24:17

我们可以借助 CSS 控制打印预览页面的页眉、页脚和边距，甚至可以实现分页媒体所需的布局和方向。我们将使用 @page 指令来实现我们的目标。

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

语法

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

解释

在此方法中，我们将在 @media 打印规则中使用 @page 规则(或指令)。该规则由 CSS 提供，允许我们在分页媒体(包括屏幕、纸张等可见的页面)上应用格式。

借助 @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 中)查看打印预览屏幕