CSS 打印

上一页
下一页

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

  • 使用更高分辨率的图像可获得更清晰、更好的效果。
  • 根据页面的大小和形状调整应用程序或网站的布局。
  • 在打印时增强应用程序或网站的整体外观。
  • 提供仅适用于打印的其他样式。

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

CSS 打印 - 使用打印样式表

您可以明确地使用样式表来满足打印需求，并将其链接到您的代码。在 html 中添加以下代码块：


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

CSS 打印 - 使用媒体查询和按规则@page

CSS 提供了 @media规则，可用于在打印在页面上或显示在屏幕上时为网页设置不同的样式需求，分别使用选项 print 和 screen。

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


@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规则进行调整和修改。在打印时，可以使用此规则定位所有页面或某些页面的子集。 

CSS 打印 - 打印请求检测

打印前和打印后的事件由浏览器发送，以便让内容确定打印可能发生的时间。此功能可用于在打印过程中调整打印布局和用户界面。

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查询

以下示例演示了媒体查询 （@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 Printing - 使用 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>
打印本页
上一页
下一页