How to Print Specific Area of Webpage by JQuery

Training Mode Regular Fastrack Crash
Classroom | Online
Course Description :

Printing Specific area of webpage is common task in web application,mostly we have requirement to print only specific part of page in web application such as list of patient data,list of employees etc. Then there is a plugin exists printarea.js by using this we can print specific part of webpage. Here I am showing how can i do this , there are some following steps :

Step1 : Download PrintArea css file and embed in your head tag:

Download Css File

Step2 : 
Download PrintArea js file and embed in your head or at the end of body tag:

Download Js File

Step3 : 
After downloading and embeding both files css and js write id in your button tag and in div :

<div class="col-lg-4 py-2 pl-1">
<button type="button" class="btn btn-success btn-sm float-right" id="print_button9">Print Now</button>
</div>

<div class="row" id="allprint">
<p>hello printable div</p>
</div>

<div class="row">
<p>this is not printable area </p>
</div>

Step4 : Place this script at the end of body tag:

<script> $("#print_button9").click(function(){ var mode = 'iframe'; // popup var close = mode == "popup"; var options = { mode : mode, popClose : close}; $("#allprint").printArea( options ); }); </script>

Complete Code: 

<!DOCTYPE html>
<html lang="en">
<head>
<title>Printpatientlabel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="assets/css/PrintArea.css" />

</head>
<body>
<div class="row" id="allprint">
<p>printable design</p>
</div>

<div class="row">
<p>not printable</p>
</div>
 
<button type="button" class="btn btn-success btn-sm float-right" id="print_button9">Print Now</button>
<script src="assets/js/jquery.PrintArea.js" type="text/JavaScript" language="javascript"></script>

<script>
$("#print_button9").click(function(){

var mode = 'iframe'; // popup
var close = mode == "popup";
var options = { mode : mode, popClose : close};
$("#allprint").printArea( options );
});
</script>
</body>
</html>

Request a Demo

Whatsapp