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 或任何其他脚本清除可打印文本并显示出来以供最终打印。 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.