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">GeeksforGeeks</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>GeeksforGeeks</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.
Similar Reads
Printing in ElectronJS ElectronJs is an Open Source Framework used for building Cross-Platform native desktop applications using web technologies such as HTML, CSS, and JavaScript which are capable of running on Windows, macOS, and Linux operating systems. It combines the Chromium engine and NodeJs into a Single Runtime.
10 min read
How to Print a Page using jQuery? Printing a webpage directly from the browser can be a useful feature for users who want a physical copy of the content. With jQuery, a popular JavaScript library that simplifies HTML document manipulation and event handling, you can easily implement a print function on your webpage. This guide will
2 min read
How to print a web page using JavaScript ? Javascript is the world most popular lightweight, cross-platform, interpreted compiled programming language, along with a scripting language for web. It facilitates the dynamic functionality that helps to make the interactive website. As all the Morden browsers use the Javascript & is a client-s
2 min read
CSS @page rule The CSS @page rule defines the dimension of the page which is gonna be printed. There are a few important things that should be under control when you want to print a web page those are listed below:Â Â The page size, orientation, margins, border, and padding.Page breaks.Headers and footers.Page coun
2 min read
How to Remove URL from Printing the Page ? When you print a Web page from your Web browser, you’ll notice that the printout contains some extra pieces of information like the page number, the date and the web page’s URL at the bottom of the page. Some times you may not need this information in your printout in order to tidy up your work. So
2 min read