JavaScript - Page Printing

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.

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 −

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.
If you do not want to keep an extra copy of a page, then you can mark your printable text using proper comments like .....  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

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.

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>

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.

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

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.
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.
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.

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.

Print Page