ES6 | Page Printing

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:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Print page</title>
</head>
  
<body>
    <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>
</body>
  
</html>

chevron_right


Output:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Page printing</title>
</head>
  
<body>
    <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>
  
</html>

chevron_right


Output:

  • 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

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.