Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to print a page using jQuery?
Allowing users to print the web page can be a great feature in many scenarios. For example, users can print the invoice, the whole article if they are on the web page containing the blog, some important data, etc.
The JQuery contains the print() method allowing us to print the HTML content of the web page by adding it into the pdf format. It opens the print pop-up, and when the user clicks the print button, it starts printing the page if the printer is connected. Otherwise, it saves the data in the local computer in the pdf file format.
Syntax
Users can follow the syntax below to use the print() method with the window object to print the web page using JQuery.
window.print();
Example 1
In the example below, we added some content to the web page. Also, we added the print button. When users click the button, it class the printPage() function. The printPage() function calls the print() method of the window object.
In the output, users can observe that when they click on the button, it opens the print pop-up, and when they click on the print button inside the print pop-up, it saves the web page content in the pdf file format.
<html>
<head>
<style>
.test {
color: red;
font-size: 20px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js">
</script>
</head>
<body>
<h2> <i> Printing the current page </i> using jQuery </h2>
<div class="test"> Hello World! </div>
<h3> Welcome to the TutorialsPoint! </h3>
<button onclick="printPage()"> Print current page </button>
<script>
function printPage() {
window.print();
}
</script>
</body>
</html>
Example 2 (Printing the Particular div Element Using JQuery)
In the example below, we demonstrated to print the content of a particular web page using JQuery. We added the div element containing the ‘print’ class name here. Also, we added the button which executes the printDiv() function on button click.
In the printDiv() function, first, we access the div element by tag name. After that, we open a new browser window and add the div element’s content into the new window. Next, we close the document of another window, and then we close another window.
In the output, when we click the button, it opens up the print pop-up page.
<html>
<head>
<style>
.print {color: red; font-size: 30px; border: 2px solid green; width: 400px; height: 200px; }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js">
</script>
</head>
<body>
<h2> <i> Printing the current div element </i> using jquery </h2>
<div class="print"> We will print this div element. Click the print button to see it in action. </div> <br> <br>
<button onclick="printDiv()"> Print current page </button>
<script>
function printDiv() {
var divToPrint = document.getElementsByClassName('print')[0];
var anotherWindow = window.open('', 'Print-Window');
anotherWindow.document.open();
anotherWindow.document.write('<html><body onload="window.print()">' + divToPrint.innerHTML + '</body></html>');
anotherWindow.document.close();
setTimeout(function() {
anotherWindow.close();
}, 10);
}
</script>
</body>
</html>
Example 3 (Printing the Page on Form Submit)
In the example below, we demonstrated to print the page on form submission. Maybe you have seen that you can download the payment invoice sheet after successful payment on many platforms.
Here, we created the form containing the different input fields. In JQuery, we access the values of the input field and display them on the web page. After that, we execute the window.print() method to print the web page containing the form data.
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"> </script>
</head>
<body>
<h2> <i> Printing the current page after submitting the form </i> using jQuery </h2>
<form id = "form" method = "post">
<input type = "text" name = "name" placeholder = "Enter your name" />
<br> <br>
<input type = "text" name = "email" placeholder = "Enter your email" />
<br> <br>
<input type = "button" name = "submit" value = "Submit" />
</form> <br> <br>
<div id = "output"> </div>
<script>
$(document).ready(function () {
$('input[type="button"]').click(function () {
var name = $('input[name="name"]').val();
var email = $('input[name="email"]').val();
var data = 'Name: ' + name + '<br>' + 'Email: ' + email;
$('#output').html(data);
window.print(); // print the current page
});
});
</script>
</body>
</html>
We learned to print the web page using JQuery in this tutorial. There are different scenarios in which we require to print the web page to download their data locally. Developers can always use the window.print() method to print the web pages.
2K+ Views
