Open In App

ES6 Page Printing

Last Updated : 03 Jan, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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

ES6 Page Redirect
The ES6 page redirect is used to send a request to different website addresses to the user and browser search engine, (search engine and user received different website address to that was requested by the search engine or the user). Redirecting to a different page that was not requested by the user or by the search engine can be on the same server
2 min read
Explain page redirection in ES6
Page redirection is a way of redirecting users and web browsers to another web address that was not requested by users. The page to which the user and web browser are redirected can be on the same web server or can be on a different web server. It could be a different website also. The page redirection feature was first introduced in 2015 when the
3 min read
How to hide an element when printing a web page using CSS?
The media query is used to hide an element when printing web pages. Use @media print query and set the visibility hidden to that element that needs to hide at printing. Example 1: In this example, hide the element h1 at printing time. To hide the element h1 use media query and set visibility:hidden. C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt;
1 min read
HTML Course First Web Page Printing Hello World
Course Navigation So far, we already have learned about the structure of an HTML document, tags etc. Let us use this knowledge to create our first web page which will print the text "Hello World!" on the screen. Open your text editor, and type the below code in it and save it with the name "index.html". Note: HTML files are saved with the file exte
2 min read
Printing the table on the web page having type effect repeatedly
In this article, we will see how to print the table on the web page having type effect repeatedly using HTML, CSS &amp; Javascript. Here, the printing of the table with the type effect can be done with the JavaScript setTimeout() function that helps to set the timer to run the function or piece of code once the timer expires. Syntax: The format for
3 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 here are a few methods that let you print web page
2 min read
How to display search result of another page on same page using ajax in JSP?
In this example, we are creating a search bar to display the result on the same page in using ajax in JSP. AJAX stands for Asynchronous JavaScript and XML. Where Ajax is mainly used for Displaying another web page content on the same web page without refreshment of the page. You can read more about ajax technology here. Approach: We use the JQuery
2 min read
How to show Page Loading div until the page has finished loading?
There are a lot of ways in which we can show a loading div but we have figured out the most optimal solution for you and that too in pure vanilla JavaScript. We will use the document.readyState property. When the value of this property changes, a readystatechange event fires on the document object. The document.readyState property can return these
2 min read
How to pass form variables from one page to other page in PHP ?
Form is an HTML element used to collect information from the user in a sequential and organized manner. This information can be sent to the back-end services if required by them, or it can also be stored in a database using DBMS like MySQL. Splitting a form into multiple steps or pages allow better data handling and layering of information. This ca
4 min read
How can a page be forced to load another page in JavaScript ?
In JavaScript, you can force a page to load another page by using the window.location object. There are a few methods to achieve this. To force a page to load another page in JavaScript, we have multiple approaches: Below are the approaches used to force a page to load another page in JavaScript: Table of Content Using window.location.replaceUsing
2 min read