How to print a page using JavaScript?

JavascriptWeb DevelopmentFront End Technology

In this tutorial, we will look at a few ways to print a page using JavaScript and compare it to understand which one is suitable in a given context.

Let’s briefly introduce the methods.

Using Window print() Method

The print() is a method on the window object. Users can invoke this method to print their documents on the window. The print method prints the data of the current window. The user gets a print dialog box where they can select the required print options.

Print method prints images, graphics, text, numbers, math calculations, etc. This method gets stuck if the document loading is incomplete when the print method is called. Print() is a global object.

Syntax

Users can follow the syntax below for using this method.

window.print();
print();

Here, the Print method has no parameters and no return value.

Example

When the user clicks on the button, the window.print() method is called and the user gets the print options for the entire document in the current window.

<!DOCTYPE html> <html> <body> <p>This is the print content.</p> <button onclick="display()">Click to Print</button> <script> function display() { window.print(); } </script> </body> </html>

Using a print library

Here, we are adding a print JavaScript library file to our HTML. The custom function inside this file is called to print the document.

Syntax

Users can follow the syntax below to use this library.

<script src =" javascript source url"></script>
<link rel = "stylesheet" href="CSS source url"/>
printJS('id','html');

Here, required js and CSS files are included using the first two syntaxes and the custom print method is called in the second syntax.

Parameters

  • id − The id attribute value of the HTML content to print.

  • html − The type of print content. It can be images or files also.

Example

Here, we have loaded the needed libraries. Once the user clicks on the button, the custom method in the library is called with the print content id as the first parameter. The print window is opened to the user.

<html> <head> <!--LOAD PRINTJS LIBRARY--> <script src="https://printjs-4de6.kxcdn.com/print.min.js"></script> <link rel="stylesheet" href="https://printjs4de6.kxcdn.com/print.min.css" /> </head> <body> <h2>Print a page using Print.js library</h2> <div id="libInp"> <p>Print content A</p> <p>Print content B</p> <p>Print content C</p> </div> <div id="libBtnWrap"> <h3>Click this button</h3> <button onclick="libPrint()">Print Page</button> </div> <p id="libOp"></p> <script> var libInpEl = document.getElementById("libInp"); var libOutEl = document.getElementById("libOp"); var libBtnWrapEl = document.getElementById("libBtnWrap"); function libPrint() { libOutEl.innerHTML = "Printing the document..."; libBtnWrapEl.style.display = "none"; printJS('libInp', 'html'); } </script> </body> </html>

Using CSS print

Here we go for the CSS media print option to print the necessary content in a document.

Syntax

Users can follow the syntax below to use this method.

@media only print
{
   body{visibility: hidden;}
   .printId{visibility: visible;}
}
print();

Here, the general print method works based on print media query.

Example

Here, we have content with an id set to it in the dom. We give this id in the print media query which makes it visible. At the same time, other body content is set to hidden. When the user clicks on the button, the content that is set to visible in the media query alone is printed.

<html> <body> <style> @media only print { body { visibility: hidden; } .cssInp { visibility: visible; } } </style> <h2> Print a page using <i>CSS print media query</i> </h2> <div class="cssInp"> <p>Print One</p> <p>Print Two</p> <p>Print Three</p> </div> <div id="cssBtnWrap"> <h3>Click this button</h3> <button onclick="cssPrint()">Print Page</button> </div> <p id="cssOp"></p> <script> var cssOutEl = document.getElementById("cssOp"); var cssBtnWrapEl = document.getElementById("cssBtnWrap"); function cssPrint() { cssOutEl.innerHTML = "Printing the document..."; cssBtnWrapEl.style.display = "none"; print(); } </script> </body> </html>

In this tutorial, we have discussed three ways to print a page. From that window.print() is a built-in method and is easy to use. As including library increases page load. A media query is better when we need to print a particular section from the document.

raja
Updated on 20-Oct-2022 07:56:19

Advertisements