JavaScript - 页面打印

上一页
下一页

很多时候，您希望在网页上放置一个按钮，以便通过实际打印机打印该网页的内容。JavaScript 可帮助您使用 window 对象的 print 函数实现此功能。

JavaScript 打印函数 window.print（） 在执行时打印当前网页。您可以使用 onclick 事件直接调用此函数，如以下示例所示。

例

请尝试以下示例。


<html>
	 	<head> 	 	 	
	 	 	 <script type = "text/javascript">
	 	 	 	 	<!--
	 	 	 	 	//-->
	 	 	 </script>
	 	</head>
	 	
	 	<body> 	 	 	
	 	 	 <form>
	 	 	 	 	<input type = "button" value = "Print" onclick = "window.print()" />
	 	 	 </form> 		
	 	</body>
<html>

尽管它用于获取打印输出，但这不是推荐的方法。适合打印的页面实际上只是一个带有文本的页面，没有图像、图形或广告。

您可以通过以下方式使页面打印机友好 -

  • 复制该页面并省略不需要的文本和图形，然后从原始页面链接到该打印机友好页面。检查 示例。
  • 如果您不想保留页面的额外副本，则可以使用适当的注释来标记可打印文本，例如 <!-- PRINT STARTS HERE -->.....<!-- PRINT ENDS HERE --> 然后您可以在后台使用 PERL 或任何其他脚本来清除可打印文本并显示以进行最终打印。
例

创建一个带有 onclick 事件的按钮，该事件与 printpage（） 方法一起附加，并且当我们想要打印页面时应该触发它。

当用户单击按钮时，将调用 printpage（） 方法（在 script 标签中），其中可能包含一些有助于打印页面的代码。


<html>
	 	<head>
	 	 	 <title>Print Page</title>
	 	 	 <script>
	 	 	 	 	function printpage() {
	 	 	 	 	 	 window.print();
	 	 	 	 	}
	 	 	 </script>
	 	</head>
	 	<body>
	 	 	 <h2>This is a sample page to print</h2>
	 	 	 <button onclick="printpage()">Print Page</button>
	 	</body>
</html>

当用户单击该按钮时，浏览器的打印对话框将打开，允许他们打印当前窗口上显示的 HTML 文档。

以下是使用 JavaScript 打印页面时需要记住的一些其他事项：

  • print（） 方法将仅打印当前窗口的内容。如果要打印多个页面，则需要为每个页面调用 print（） 方法。
  • print（） 方法不会打印任何隐藏在视图中的内容。例如，如果某个元素的 style 属性设置为 “display： none”，则不会打印该元素。
  • print（） 方法不会打印在页面加载后动态加载的任何内容。例如，如果使用 JavaScript 从服务器加载图像，则不会打印该图像。

如果需要打印更复杂的内容（如表格或表单），则可能需要使用其他方法，如生成 PDF 文件或使用第三方打印库。

如何打印页面？

如果您在网页上找不到上述功能，则可以使用浏览器的标准工具栏来打印网页。按如下方式点击链接。

File → Print → Click OK button.
打印本页
上一页
下一页