打印是任何应用程序或网页的一个重要方面。内容的打印可以与其界面外观截然不同。打印时，用户可能希望:

  • 使用更高分辨率的图像以获得更清晰、更好的结果。

  • 根据页面的大小和形状调整应用程序或网站的布局。

  • 增强应用程序或网站在打印时的整体外观。

  • 提供仅适用于打印的附加样式。

为了管理您所有的打印需求和流程，您可以考虑本文提到的要点。

CSS 打印 - 使用打印样式表

您可以明确地为打印需求提供样式表并将其链接到您的代码。在 html 中添加以下代码块:

<link href="/path/to/print.css" media="print" rel="stylesheet" />

CSS 打印 - 使用媒体查询和 @page At-Rule

CSS 提供 @media at-rule，可用于分别使用选项"打印"和"屏幕"在页面上打印或在屏幕上显示时设置网页的不同样式需求。

您可以在样式表末尾添加以下代码块。这是一个示例。

@media print {
   /* All print related styles to be added here */
   #header-part,
   #footer-part,
   #nav-part {
      display: none !important;
   }
}

上面的代码片段在打印时不会打印#header-part、#footer-part和#nav-part的样式。

页面的各个方面，例如方向、尺寸、边距等，都可以使用 @page at 规则进行调整和修改。在进行打印时，可以使用此规则来定位所有页面或某些页面的子集。

CSS 打印 - 打印请求检测

事件 beforeprint 和 afterprint 由浏览器发送，让内容确定何时可以打印已经发生。此功能可用于在打印过程中调整打印布局和用户界面。

CSS 打印 - 使用@page at-rule

在以下示例中，网页被分成多个部分，当以打印格式打开时，会分成不同的页面，并且页面的边距也以打印格式设置。

<html>
<head>
<style> 
   @page {
      size: landscape;
      margin: 15%;
   }

   section {
      page-break-after: always;
      break-after: page;
      background-color: aquamarine;
      width: 500px;
   }

   @media print {
   button {
      display: none;
   }
   }
</style>
</head>
<body>
   <article>
      <section>
      <h2>Header1</h2>
      <p>
         Section one
      </p>
      </section>
      <section>
         <h2>Header2</h2>
         <p>
         Section two
         </p>
      </section>
      <section>
         <h2>Header3</h2>
         <p>
         Section three
         </p>
      </section>
   </article>
   <button style="background-color: green; color: white; font-size: 1em;">Print</button>
   <script>
      const button = document.querySelector("button");

      button.addEventListener("click", () => {
      window.print();
      });
   </script>
</body>
</html>

CSS 打印 - 使用@media Query

以下示例演示了媒体查询 (@media) 的使用，其中为屏幕显示指定格式或样式，并为打印格式更改相同的内容。单击"打印"按钮时，页面布局和样式会发生变化。

<html>
<head>
<style>
      @media screen {
         h2 {
            font-size: large;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            color: blue;
            font-style: normal;
         }
      }

      @media print {
         h2 {
            font-family: cursive;
            font-style: italic;
            color: red;
         }
      
      }

      @media print {
         button {display: none;}
            }

</style>
</head>
<body>
   <article>
      <section>
      <h2>Header1</h2>
      <p>
         Section one
      </p>
      </section>
      <section>
         <h2>Header2</h2>
         <p>
         Section two
         </p>
      </section>
      <section>
         <h2>Header3</h2>
         <p>
         Section three
         </p>
      </section>
   </article>
   <button style="background-color: green; color: white; font-size: 1em;">Print</button>
   <script>
      const button = document.querySelector("button");

      button.addEventListener("click", () => {
      window.print();
      });
   </script>
</body>
</html>

CSS 打印 - afterprint 事件的使用

以下示例演示了 afterprint 事件的使用以及打印后页面自行关闭并返回到最后一页。

<html>
<head>
<style>
   @media screen {
      h2 {
         font-size: large;
         font-family: Verdana, Geneva, Tahoma, sans-serif;
         color: blue;
         font-style: normal;
      }
   }

   @media print {
      h2 {
         font-family: cursive;
         font-style: italic;
         color: red;
      }
   }

   @media print {
      button {display: none;}
   }
</style>
</head>
<body>
   <article>
      <section>
      <h2>Header1</h2>
      <p>
         Section one
      </p>
      </section>
      <section>
         <h2>Header2</h2>
         <p>
         Section two
         </p>
      </section>
      <section>
         <h2>Header3</h2>
         <p>
         Section three
         </p>
      </section>
   </article>
   <button style="background-color: green; color: white; font-size: 1em;">Print</button>
   <script>
      const button = document.querySelector("button");

      button.addEventListener("click", () => {
      window.print();
      });

      window.addEventListener("afterprint", () => self.close);
   </script>
</body>
</html>

CSS 打印 - 链接到外部样式表

打印样式可以添加到文件中，并且可以链接到相同的 CSS 文件您的 html 代码，作为外部样式表。参考下面的例子:

<html>
<head>
   <link href="print.css" media="print"  rel="stylesheet" />
<style>
   @media screen {
         h2 {
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            font-style: normal;
            color: rebeccapurple;
         }
      
      }
</style>
</head>
<body>
   <article>
      <section>
      <h2>Header1</h2>
      <p>
         Section one
      </p>
      </section>
      <section>
         <h2>Header2</h2>
         <p>
         Section two
         </p>
      </section>
      <section>
         <h2>Header3</h2>
         <p>
         Section three
         </p>
      </section>
   </article>
   <button style="background-color: green; color: white; font-size: 1em;">Print</button>
   <script>
      const button = document.querySelector("button");

      button.addEventListener("click", () => {
      window.print();
      });


   </script>
</body>
</html>