Wednesday, February 5, 2020

Step by step guide on how to use JavaScript to print the content of your web page( JavaScript Page Printing)


Hello everyone! good evening and welcome to my new tutorial post on JavaScript. In my last tutorial post we discussed about JavaScript void keyword which was discussed with some examples.

In this section of my tutorial on Javascript, we are going to be discussing about how to print a webpage using JavaScript.

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

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

Example

Try the following example to have better understanding of what we are actually talking about.

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

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

Output

Below is the output of the above example.


 



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

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 print the webpage. Follow the link as follows: 

File  --->  Print  --->  Click OK button.

Alright guys, we have come to the end of this tutorial post on JavaScript page printing. In my next tutorial post, we are going to be discussing about another wonderful topic called JavaScript Object. 

Don't forget to drop your questions via the comment box below and also follow us on our various social media platforms to stay updated on our latest tutorials. Thanks for reading and bye for now.
Share:

2 comments: