JavaScript - 页面打印

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

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

示例

尝试以下示例。

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

虽然它满足了获取打印输出的目的，但这不是推荐的方式。一个打印友好的页面实际上只是一个包含文本的页面，没有图像、图形或广告。

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

复制页面并省略不需要的文本和图形，然后从原始页面链接到该打印友好的页面。查看示例。
如果您不想保留页面的额外副本，则可以使用适当的注释标记可打印文本，例如..... ，然后您可以使用 PERL 或任何其他后台脚本清除可打印文本并显示以进行最终打印。我们在 Tutorialspoint 使用此方法为我们的网站访问者提供打印功能。

示例

创建一个带有 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.

打印页面