As we know, ECMAScript (ES) is a scripting language specification standardized by ECMAScript International. It adds new features to javascript. Its specification is influenced by languages like Self, Perl, Python, Java, etc. Some call it JavaScript 6. So, printing the page is the same. By using the print function of the window object. It prints the current webpage (original content) when executed.
Syntax:
window.print()
Example 1:
javascript
<center> <h1 style="color:Green">neveropen</h1> <h3>Click on Print to print the page.</h3> <button type="button" onclick="window.print()"> Print </button> <!--prints the page--> </center> |
Output:
But, not always we want to print everything from the webpage. If you want to provide a print only with the specific information then you can do that with the help of the <div> tag. In the below example, a form which is the complete/original content, where we can only print the original displayed web page. We cannot print the filled up form info. As we are assigning the original contents to the variables to be printed but, not modified once. But the web pages are not limited to text only. There are other things too in the webpages like images consisting of different colors, etc. Printing such pages can be done in the following ways:
- Make a copy of the page and leave out the garbage (not needed) text and graphics, then link that to the printer-friendly page from the original. This means that the whole page will be printed as you have seen the page it will be printed as it is without any change in it, if you will see an advertisement it will also be printed on it.
- If you don’t want to keep an extra copy of a page, then you can mark your printable text using proper comments as 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. This means that the selected portion will be printed.
Example 2:
javascript
<body style="text-align: center;"> <h1>neveropen</h1> <h4>Print Specific Info</h4> <div id="specificInfo"> <form> Name:<br> <input type="text" name="Name" /> <br><br> E-mail:<br> <input type="text" name="EMail" /> <br><br> </form> </div> <form> Phone:<br> <input type="text" name="Ph" /> <br><br> Favorite Guardian: <select name="Country"> <option value="-1" selected>Choose</option> <option value="1">Quill</option> <option value="2">Gamora</option> <option value="3">Groot</option> <option value="4">Rocket</option> <option value="5">Drax</option> </select> <br><br> </form> <input type="button" onclick="printDiv('specificInfo')" value="Print" /> <script> function printDiv(divName) { // Makes the content in the div tag // as the main and only content // and assigns to this variable var printContents = document.getElementById(divName).innerHTML; // Complete content of the page var originalContent = document.body.innerHTML; // printContents is assigned to innerHtml now // the printable content is the div tag document.body.innerHTML = printContents; window.print(); // Prints the page // originalContent is assigned to innerHtml // now the printable content is the complete // displayed page document.body.innerHTML = originalContent; // If prints the complete page // window.print(); } </script> </body> |
Output:
Note: Here, Name and E-mail are enclosed between div tag, so this becomes the Specific printable part. And when we assigned the printable part to the innerHTML it becomes the complete content of the page and gets printed.
We have a complete list of Javascript ES6 features, to check those please go through this Introduction to ES6 article.
We have a Cheat Sheet on Javascript where we covered all the important topics of Javascript to check those please go through Javascript Cheat Sheet-A Basic guide to JavaScript.
