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
