Javascript 简明教程

JavaScript - Page Printing

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

Many times you would like to place a button on your webpage to print the content of that web page via an actual printer. JavaScript helps you to implement this functionality using the print function of window object.

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

The JavaScript print function window.print() prints the current web page when executed. You can call this function directly using the onclick event as shown in the following example.

Example

尝试以下示例。

Try the following example.

<html>
   <head>
      <script type = "text/javascript">
         <!--
         //-->
      </script>
   </head>

   <body>
      <form>
         <input type = "button" value = "Print" onclick = "window.print()" />
      </form>
   </body>
<html>

尽管它对获取打印输出有帮助,但它并不是一种推荐的方法。对于打印机来说,友好页面其实就是没有图像、图形或广告副本的页面。

Although it serves the purpose of getting a printout, it is not a recommended way. A printer friendly page is really just a page with text, no images, graphics, or advertising.

你可以通过以下方法让网页成为打印机友好型页面:

You can make a page printer friendly in the following ways −

  1. Make a copy of the page and leave out unwanted text and graphics, then link to that printer friendly page from the original. Check Example.

  2. If you do not want to keep an extra copy of a page, then you can mark your printable text using proper comments like <!-- PRINT STARTS HERE -→…​.. <!-- PRINT ENDS HERE -→ and then you can use PERL or any other script in the background to purge printable text and display for final printing. We at Tutorialspoint use this method to provide print facility to our site visitors.

Example

用 onclick 事件创建一个按钮,该事件与 printpage() 方法绑定在一起,当我们要打印页面时,此方法应该被触发。

Create a button with an onclick event that is attached with the printpage() method, & it should be triggered when we want to print the page.

当用户单击该按钮时,将调用 printpage() 方法(在脚本标记中),它可能包含有助于打印页面的某些代码。

When the user clicks the button then printpage() method (in the script tag) will be called, which may contains some code that helps to print the page.

<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 文档。

When the user clicks the button, the browser’s print dialog box will open, allowing them to print your HTML document as displayed on their current window.

在使用 JavaScript 打印页面时,请记住以下几点:

Here are some additional things to keep in mind when using JavaScript to print a page:

  1. The print() method will only print the content of the current window. If you want to print multiple pages, you will need to call the print() method for each page.

  2. The print() method will not print any content that is hidden from view. For example, if you have an element with the style property set to "display: none", it will not be printed.

  3. The print() method will not print any content that is loaded dynamically after the page has loaded. For example, if you use JavaScript to load an image from a server, the image will not be printed.

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

If you need to print more complex content, such as a table or a form, you may need to use a different method, such as generating a PDF file or using a third-party printing library.

How to Print a Page?

如果你没有在网页上找到上述功能,那么你可以使用浏览器的标准工具栏来打印网页。请按照下列链接进行操作。

If you don’t find the above facilities on a web page, then you can use the browser’s standard toolbar to get print the web page. Follow the link as follows.

File →  Print → Click OK  button.