Skip to content
Related Articles

Related Articles

ES6 | Page Printing

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 11 Oct, 2019

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.



Example 1:

<!DOCTYPE html>
    <title>Print page</title>
        <h1 style="color:Green">GeeksforGeeks</h1>
        <h3>Click on Print to print the page.</h3>
        <button type="button" onclick="window.print()">
        <!--prints the page-->


  • Before clicking the button:
  • After clicking the button:

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:

<!DOCTYPE html>
    <title>Page printing</title>
    <h4>Print Specific Info</h4>
    <div id="specificInfo">
            <input type="text" name="Name" />
            <input type="text" name="EMail" />
        <input type="text" name="Ph" />
        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>
    <input type="button" onclick="printDiv('specificInfo')"
            value="Print" />
        function printDiv(divName) {
            // Makes the content in the div tag
            // as the main and only content 
            // and assigns to this variable
            var printContents = 
            // 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(); 


  • Before clicking the button:
  • After clicking the button:

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.

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!