Print a div content using javascript
Print a div content using javascript - In this article you will learn, How to print bills/invoices using JavaScript, CSS media query and JavaScript Window.print() Method ?
In previous article you was learn
How to preview image before uploading using JavaScript?
Find first element in JSON using object property
Most of the time we needs to print hidden bill-invoice or receipts HTML markups, without printing entire page contents.
Here you will find the very short CSS and JavaScript magic to print only selected portion of the entire page at any place with in HTML contents.
We can print contents of web page with help of print() method of window object in JavaScript as follows.
window.print();
JavaScript Window print() Method:
Page print in JavaScript is very simple code, which is used to print the content of the web pages.
The print() method prints the contents of the current window.
It opens Print dialog box which lets you choose various printing options.
We can print contents of entire web page as follows.
var jsPrintAll = function () {
window.print();
}
We can add half second delay too as follows.
<script>
var jsPrintAll = function () {
setTimeout(function () {
window.print();
}, 500);
}
</script>
It will waits to print half seconds. You can increase delay if page contains some data driven contents, which takes time to fetch data from database. otherwise empty contents will be print.
Now we will add an Print button on web page and invoke jsPrintAll() method by onclick event of Print button.
<div style="width:100%; text-align:right;">
<input type="button" id="btnPrint" onclick="jsPrintAll()" value="Print" />
</div>
<div>
<p>Contents to Print</p>
<p>Contents to Print</p>
<p>Contents to Print</p>
<p>Contents to Print</p>
</div>
<div>
<p>Contents not to Print</p>
<p>Contents not to Print</p>
<p>Contents not to Print</p>
<p>Contents not to Print</p>
</div>
Entire HTML markup will becomes as follows.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>SWClass javascript print</title>
<script>
var jsPrintAll = function () {
setTimeout(function () {
window.print();
}, 500);
}
</script>
</head>
<body>
<div style="width:100%;">
<input type="button" id="btnPrint" onclick="jsPrintAll()" value="Print" />
</div>
<div>
<p>Contents to Print</p>
<p>Contents to Print</p>
<p>Contents to Print</p>
<p>Contents to Print</p>
</div>
<div>
<p>Contents not to Print</p>
<p>Contents not to Print</p>
<p>Contents not to Print</p>
<p>Contents not to Print</p>
</div>
</body>
</html>
Wait before proceed, it will print entire web page contents i.e. every content on the page with html controls (Print button) too.
Question: So how to print only selected contents?
Answer: With the help of css classes and media query as follows.
Create two css classes print and no-print
Add follows css in head tag of HTML web page.
<style>
.print {
display:none;
}
.no-print{
display:block;
}
@media print{
.print {
display:block;
}
.no-print{
display:none;
}
}
</style>
Now add css class print on div you want to print and no-print on div, which you not want to print as follows.
<div class="no-print" style="width:100%;">
<input type="button" id="btnPrint" onclick="jsPrintAll()" value="Print" />
</div>
<div class="print">
<p>Contents to Print</p>
<p>Contents to Print</p>
<p>Contents to Print</p>
<p>Contents to Print</p>
</div>
<div class="no-print">
<p>Contents not to Print</p>
<p>Contents not to Print</p>
<p>Contents not to Print</p>
<p>Contents not to Print</p>
</div>
The entire HTML markup will looks as follows.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>SWClass javascript print</title>
<style>
.print {
display:none;
}
.no-print{
display:block;
}
@media print{
.print {
display:block;
}
.no-print{
display:none;
}
}
</style>
<script>
var jsPrintAll = function () {
setTimeout(function () {
window.print();
}, 500);
}
</script>
</head>
<body>
<div class="no-print" style="width:100%;">
<input type="button" id="btnPrint" onclick="jsPrintAll()" value="Print" />
</div>
<div class="print">
<p>Contents to Print</p>
<p>Contents to Print</p>
<p>Contents to Print</p>
<p>Contents to Print</p>
</div>
<div class="no-print">
<p>Contents not to Print</p>
<p>Contents not to Print</p>
<p>Contents not to Print</p>
<p>Contents not to Print</p>
</div>
</body>
</html>
Another HTML markup example to print invoice:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>SWClass javascript print</title>
<style>
.print {
display:none;
}
.no-print{
display:block;
}
@media print{
.print {
display:block;
}
.no-print{
display:none;
}
}
</style>
<script>
var jsPrintAll = function () {
setTimeout(function () {
window.print();
}, 500);
}
</script>
</head>
<body>
<div class="no-print" style="width:100%;">
<input type="button" id="btnPrint" onclick="jsPrintAll()" value="Print" />
</div>
<div class="no-print" style="width:100%;">
To print invoice click on print button.
</div>
<div class="print" style="background-color:#e2e1e0;font-family: Open Sans, sans-serif;font-size:100%;font-weight:400;line-height:1.4;color:#000;">
<table style="max-width:670px;margin:50px auto 10px;background-color:#fff;padding:50px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);-moz-box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24); border-top: solid 10px green;">
<thead>
<tr>
<th style="text-align:left;"><img style="max-width: 150px;" src="https://swclass.com/Content/images/swc-logo.png" alt="swclass tours"></th>
<th style="text-align:right;font-weight:400;">05th Sep, 2019</th>
</tr>
</thead>
<tbody>
<tr>
<td style="height:35px;"></td>
</tr>
<tr>
<td colspan="2" style="border: solid 1px #ddd; padding:10px 20px;">
<p style="font-size:14px;margin:0 0 6px 0;"><span style="font-weight:bold;display:inline-block;min-width:150px">Order status</span><b style="color:green;font-weight:normal;margin:0">Success</b></p>
<p style="font-size:14px;margin:0 0 6px 0;"><span style="font-weight:bold;display:inline-block;min-width:146px">Transaction ID</span> abcd1234567890</p>
<p style="font-size:14px;margin:0 0 0 0;"><span style="font-weight:bold;display:inline-block;min-width:146px">Order amount</span> Rs. 6000.00</p>
</td>
</tr>
<tr>
<td style="height:35px;"></td>
</tr>
<tr>
<td style="width:50%;padding:20px;vertical-align:top">
<p style="margin:0 0 10px 0;padding:0;font-size:14px;"><span style="display:block;font-weight:bold;font-size:13px">Name</span> Palash Basak</p>
<p style="margin:0 0 10px 0;padding:0;font-size:14px;"><span style="display:block;font-weight:bold;font-size:13px;">Email</span> palash@gmail.com</p>
<p style="margin:0 0 10px 0;padding:0;font-size:14px;"><span style="display:block;font-weight:bold;font-size:13px;">Phone</span> +91-1234567890</p>
<p style="margin:0 0 10px 0;padding:0;font-size:14px;"><span style="display:block;font-weight:bold;font-size:13px;">ID No.</span> 2556-1259-9842</p>
</td>
<td style="width:50%;padding:20px;vertical-align:top">
<p style="margin:0 0 10px 0;padding:0;font-size:14px;"><span style="display:block;font-weight:bold;font-size:13px;">Address</span> Khudiram Pally, Malbazar, West Bengal, India, 735221</p>
<p style="margin:0 0 10px 0;padding:0;font-size:14px;"><span style="display:block;font-weight:bold;font-size:13px;">Number of gusets</span> 2</p>
<p style="margin:0 0 10px 0;padding:0;font-size:14px;"><span style="display:block;font-weight:bold;font-size:13px;">Duration of your vacation</span> 25/04/2017 to 28/04/2017 (3 Days)</p>
</td>
</tr>
<tr>
<td colspan="2" style="font-size:20px;padding:30px 15px 0 15px;">Items</td>
</tr>
<tr>
<td colspan="2" style="padding:15px;">
<p style="font-size:14px;margin:0;padding:10px;border:solid 1px #ddd;font-weight:bold;">
<span style="display:block;font-size:13px;font-weight:normal;">Homestay with fooding & lodging</span> Rs. 3500 <b style="font-size:12px;font-weight:300;"> /person/day</b>
</p>
<p style="font-size:14px;margin:0;padding:10px;border:solid 1px #ddd;font-weight:bold;"><span style="display:block;font-size:13px;font-weight:normal;">Pickup & Drop</span> Rs. 2000 <b style="font-size:12px;font-weight:300;"> /person/day</b></p>
<p style="font-size:14px;margin:0;padding:10px;border:solid 1px #ddd;font-weight:bold;"><span style="display:block;font-size:13px;font-weight:normal;">Local site seeing with guide</span> Rs. 800 <b style="font-size:12px;font-weight:300;"> /person/day</b></p>
<p style="font-size:14px;margin:0;padding:10px;border:solid 1px #ddd;font-weight:bold;"><span style="display:block;font-size:13px;font-weight:normal;">Tea tourism with guide</span> Rs. 500 <b style="font-size:12px;font-weight:300;"> /person/day</b></p>
<p style="font-size:14px;margin:0;padding:10px;border:solid 1px #ddd;font-weight:bold;"><span style="display:block;font-size:13px;font-weight:normal;">River side camping with guide</span> Rs. 1500 <b style="font-size:12px;font-weight:300;"> /person/day</b></p>
<p style="font-size:14px;margin:0;padding:10px;border:solid 1px #ddd;font-weight:bold;"><span style="display:block;font-size:13px;font-weight:normal;">Trackking and hiking with guide</span> Rs. 1000 <b style="font-size:12px;font-weight:300;"> /person/day</b></p>
</td>
</tr>
</tbody>
<tfooter>
<tr>
<td colspan="2" style="font-size:14px;padding:50px 15px 0 15px;">
<strong style="display:block;margin:0 0 10px 0;">Regards</strong> swclass Tours<br> Sec 34 A, SCO-152-155 Pin/Zip - 126034, Chandigarh, India<br><br>
<b>Phone:</b> 878787878787<br>
<b>Email:</b> contact@swclass.com
</td>
</tr>
</tfooter>
</table>
</div>
</body>
</html>
Print a div content using javascript - Hope it helps you to make your development easy, fast and adds one more little useful skill in your web development skills set.
If you have any query or question or topic on which, we might have to write an article for your interest or any kind of suggestion regarding this post, Just feel free to write us, by hit add comment button below or contact via Contact Us form.
Your feedback and suggestions will be highly appreciated. Also try to leave comments from your valid verified email account, so that we can respond you quickly.