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>

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

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

  • 复制页面并省略不需要的文本和图形,然后从原始页面链接到该打印友好的页面。查看示例

  • 如果您不想保留页面的额外副本,则可以使用适当的注释标记可打印文本,例如<!-- 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.
广告