How to Print Specific Area of Webpage by JQuery

How to Print Specific Area of Webpage by JQuery

Printing a Specific area of the webpage is a common task in the web application. Primarily we must print only a specific part of a page in a web application, such as the list of patient data, list of employees, etc. Then there is a plugin that exists printarea.js; we can print a specific part of the web page by using this. 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 the PrintArea js file and embed it in your head or at the end of the body tag:

Download Js File

Step3 : 
After downloading and embedding both files CSS and js write id in your button tag and div :

<div class="col-lg-4 py-2 pl-1"><br /> <button id="print_button9" class="btn btn-success btn-sm float-right" type="button">Print Now</button></div>
<pre><br /> </pre>
<div id="allprint" class="row"><br />
<p>hello printable div</p>
</div>
<pre><br /> </pre>
<div class="row"><br />
<p>this is not printable area</p>
</div>


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

<script type="text/javascript">// <![CDATA[
$("#print_button9").click(function(){ <br />var mode = 'iframe'; // popup <br />var close = mode == "popup"; <br />var options = { mode : mode, popClose : close}; <br />$("#allprint").printArea( options ); }); <br />
// ]]></script>

Categories: web designing jquery

Trending Courses

CodeIgniter

Regular : 45 Days

Fastrack : 20 Days

Crash : 10 Days

Advance Digital Marketing

Regular : 6 Months

Fastrack : 3 Months

Crash : 2 Months

React JS

Regular : 45 Days

Fastrack : 20 Days

Crash : 7 Days

Laravel

Regular : 45 Days

Fastrack : 20 Days

Crash : 10 Days

Front End Developer

Regular : 7 Month

Fastrack : 4 Month

Crash : 2 Month

Related Blogs

Request For Demo