CSS 从 window.print() 中去除页眉和页脚

在本文中，我们将介绍如何使用CSS从window.print()方法中去除打印页眉和页脚。

阅读更多：CSS 教程

window.print()方法

window.print()是一个浏览器提供的JavaScript方法，用于将当前页面打印出来。当用户点击打印按钮或者按下Ctrl+P快捷键时，就会调用window.print()方法。

默认情况下，使用window.print()方法打印出来的页面会包含页眉和页脚，其中包含了页面的标题、页码以及打印时间等信息。有时候我们希望去除页眉和页脚，以便打印出的页面更加简洁。

CSS样式去除页眉和页脚

要去除window.print()方法打印出来的页眉和页脚，可以利用@media打印媒体查询，以及CSS的相关属性进行控制。

@media print {
  @page {
    margin: 0;                    /* 去除页边距 */
    size: auto;                   /* 自动调整纸张大小 */
  }

  body {
    margin: 0;                    /* 去除页面的外边距 */
  }

  header,
  footer,
  aside,
  nav,
  form,
  .sidebar,
  .ad,
  .print-button {
    display: none;                /* 隐藏需要去除的元素 */
  }
}

在上面的代码中，我们使用@media print媒体查询，使其中的样式只在打印时生效。然后，通过设置@page的margin为0，去除了页边距。接下来，通过设置body的margin为0，去除了页面的外边距。

接下来，我们使用了display: none来隐藏了一些元素，包括header、footer、aside、nav、form以及具有类名为sidebar、ad、print-button的元素。这些元素通常包含了页眉和页脚的内容。

通过上述的CSS样式，我们成功去除了window.print()方法打印出来的页眉和页脚。

示例说明

下面我们通过一个示例来说明如何使用CSS去除页眉和页脚。

<!DOCTYPE html>
<html>
<head>
  <title>示例：去除页眉和页脚</title>
  <style>
    @media print {
      @page {
        margin: 0;
        size: auto;
      }

      body {
        margin: 0;
      }

      header,
      footer,
      aside,
      nav,
      form,
      .sidebar,
      .ad,
      .print-button {
        display: none;
      }
    }
  </style>
</head>
<body>
  <h1>示例：去除页眉和页脚</h1>

  <header>
    <h2>这是页眉</h2>
  </header>

  <main>
    <p>这是主要内容。</p>
  </main>

  <footer>
    <h3>这是页脚</h3>
  </footer>
</body>
</html>

在上述示例中，我们使用了与前面介绍相同的CSS样式。在body中，我们添加了一个标题