print a specific area of the web page using jQuery
Today, We want to share with you print a specific area of the web page using jQuery.
In this post we will show you print a specific area of the web page using jQuery, hear for print a specific area of the web page using jQuery we will give you demo and example for implement.
In this post, we will learn about print a specific area of the web page using jQuery with an example.
Include jquery and PrintArea.js
<script src="js/jquery-1.11.1.min.js"></script> <script src="js/jquery.PrintArea.js" type="text/JavaScript" language="javascript"></script>
Script code button click to print File
<script> $(document).ready(function(){ $(".print").click(function(){ var mode = 'iframe'; // simple open the popup var close = mode == "popup"; //defult mode var options = { mode : mode, popClose : close}; $("#printThisTable").printArea( options );//create printThisTable id }); $("#print_button2").click(function(){ var mode = 'iframe'; // simple open popup var close = mode == "popup"; var options = { mode : mode, popClose : close}; $("div.content").printArea( options ); }); }); </script>
HTML Part using This part to print Example : 1
<button class="btn btn-success float-right print" style="margin-bottom:10px;">Print Report</button> <div class="wrapper print"> <main class="daily-report"> <div class="container"> <div class="daily-report-ineer"> <div class="table-responsive"> <table class="table" border="1" cellpadding="0" cellspacing="0"> <tr height="30"> <td align="center" width="50" rowspan="2">DATE</td> <td align="center" width="50" colspan="5">BOARD(BIG MACHINE)</td> <td align="center" width="50" rowspan="2">TOTAL B.M</td> <td align="center" width="50" rowspan="2">B.M WIN</td> <td align="center" width="50" rowspan="2">B.M LOSE</td> <td align="center" width="50" colspan="6">NETT</td> <td align="center" width="50" rowspan="2">TOTAL NETT</td> <td align="center" width="50" rowspan="2">NETT WIN</td> <td align="center" width="50" rowspan="2">NETT LOSE</td> <td align="center" width="50" rowspan="2">TOTAL</td> </tr> <tr height="30"> <td align="center" width="50">COMPANY'S.M</td> <td align="center" width="50">RENTAL-PETER</td> <td align="center" width="50">RENTAL-AH GU</td> <td align="center" width="50">RENTAL-OTHERS</td> <td align="center" width="50">PARTNER'S.M</td> <td align="center" width="50">ROLLEX</td> <td align="center" width="50">SCR888</td> <td align="center" width="50">NEW TOWN</td> <td align="center" width="50">I-GAME</td> <td align="center" width="50">N/A</td> <td align="center" width="50">N/A</td> </tr> <tr height="30"> <td align="center" width="50">PHP</td> <td align="center" width="50">wordpress</td> <td align="center" width="50">pakainfo</td> <td align="center" width="50">pakainfo</td> <td align="center" width="50">pakainfo</td> <td align="center" width="50">pakainfo</td> <td align="center" width="50">pakainfo</td> <td align="center" width="50">pakainfo</td> <td align="center" width="50">pakainfo</td> <td align="center" width="50">pakainfo</td> <td align="center" width="50">pakainfo</td> <td align="center" width="50">pakainfo</td> <td align="center" width="50">pakainfo</td> <td align="center" width="50">pakainfo</td> <td align="center" width="50">pakainfo</td> <td align="center" width="50">pakainfo</td> <td align="center" width="50">pakainfo</td> <td align="center" width="50">pakainfo</td> <td align="center" width="50">pakainfo</td> </tr> <tr height="30"> <td align="center" width="50">001</td> <td align="center" width="50">ng4free</td> <td align="center" width="50">ng4free</td> <td align="center" width="50">ng4free</td> <td align="center" width="50">ng4free</td> <td align="center" width="50">ng4free</td> <td align="center" width="50">ng4free</td> <td align="center" width="50">ng4free</td> <td align="center" width="50">ng4free</td> <td align="center" width="50">ng4free</td> <td align="center" width="50">ng4free</td> <td align="center" width="50">ng4free</td> <td align="center" width="50">ng4free</td> <td align="center" width="50">ng4free</td> <td align="center" width="50">ng4free</td> <td align="center" width="50">ng4free</td> <td align="center" width="50">ng4free</td> <td align="center" width="50">ng4free</td> <td align="center" width="50">ng4free</td> </tr> <tr height="30"> <td align="center" width="50">002</td> <td align="center" width="50">w3free.blogspot</td> <td align="center" width="50">w3free.blogspot</td> <td align="center" width="50">w3free.blogspot</td> <td align="center" width="50">w3free.blogspot</td> <td align="center" width="50">w3free.blogspot</td> <td align="center" width="50">w3free.blogspot</td> <td align="center" width="50">w3free.blogspot</td> <td align="center" width="50">w3free.blogspot</td> <td align="center" width="50">w3free.blogspot</td> <td align="center" width="50">w3free.blogspot</td> <td align="center" width="50">w3free.blogspot</td> <td align="center" width="50">w3free.blogspot</td> <td align="center" width="50">w3free.blogspot</td> <td align="center" width="50">w3free.blogspot</td> <td align="center" width="50">w3free.blogspot</td> <td align="center" width="50">w3free.blogspot</td> <td align="center" width="50">w3free.blogspot</td> <td align="center" width="50">w3free.blogspot</td> </tr> <tr height="30"> <td align="center" width="50">003</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50"></td> </tr> </table> </div> </div> </div> </main> </div><!-- wrapper -->
HTML Part using This part to print Example : 2
<body> <button class="btn btn-success float-right print" style="margin-bottom:10px;">Print Report</button> <div class="wrapper" id="print_button2"> <main class="daily-report"> <div class="container"> <div class="daily-report-ineer"> <div class="table-responsive"> <table class="table" border="1" cellpadding="0" cellspacing="0"> <tr height="30"> <td align="center" width="50" rowspan="3">CODE</td> <td align="center" width="50" rowspan="3">INV NO.</td> <td align="center" width="50" colspan="11">BOARD(BIG MACHINE)</td> <td align="center" width="50" colspan="9">NET</td> <td align="center" width="50" rowspan="3">TOTAL</td> <td align="center" width="50" rowspan="3">NOTE(IF ANY)</td> </tr> <tr height="30"> <td align="center" width="50" colspan="2">COMPANY'S.M</td> <td align="center" width="50" colspan="2">RENTAL-PETER</td> <td align="center" width="50" colspan="2">RENTAL-AH GU</td> <td align="center" width="50" colspan="2">RENTAL(OTHERS)</td> <td align="center" width="50" colspan="2">PARTNER'S.M</td> <td align="center" width="50" rowspan="2">Total</td> <td align="center" width="50" rowspan="2">ROLLEX</td> <td align="center" width="50" rowspan="2">%</td> <td align="center" width="50" rowspan="2">SCR888</td> <td align="center" width="50" rowspan="2">%</td> <td align="center" width="50" rowspan="2">NEW TOWN</td> <td align="center" width="50" rowspan="2">%</td> <td align="center" width="50" rowspan="2">I-GAME</td> <td align="center" width="50" rowspan="2">%</td> <td align="center" width="50" rowspan="2">Total</td> </tr> <tr height="30"> <td align="center" width="50">G.TOTAL</td> <td align="center" width="50">%</td> <td align="center" width="50">G.TOTAL</td> <td align="center" width="50">%</td> <td align="center" width="50">G.TOTAL</td> <td align="center" width="50">%</td> <td align="center" width="50">G.TOTAL</td> <td align="center" width="50">%</td> <td align="center" width="50">G.TOTAL</td> <td align="center" width="50">%</td> <tr> <tr height="30"> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <tr> <tr height="30"> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <td align="center" width="50">Pakainfo.com</td> <tr> <tr height="30"> <td align="center" width="50">001</td> <td align="center" width="50">CLOSED</td> <td align="center" width="50">1</td> <td align="center" width="50">-</td> <td align="center" width="50">-</td> <td align="center" width="50">-</td> <td align="center" width="50">-</td> <td align="center" width="50">-</td> <td align="center" width="50">-</td> <td align="center" width="50">-</td> <td align="center" width="50">-</td> <td align="center" width="50">-</td> <td align="center" width="50">1</td> <td align="center" width="50">-</td> <td align="center" width="50">-</td> <td align="center" width="50">-</td> <td align="center" width="50">-</td> <td align="center" width="50">-</td> <td align="center" width="50">-</td> <td align="center" width="50">-</td> <td align="center" width="50">-</td> <td align="center" width="50">-</td> <td align="center" width="50">1</td> <td align="center" width="50"></td> <tr> <tr height="30"> <td align="center" width="50">002</td> <td align="center" width="50">CLOSED</td> <td align="center" width="50">1</td> <td align="center" width="50">-</td> <td align="center" width="50">-</td> <td align="center" width="50">-</td> <td align="center" width="50">-</td> <td align="center" width="50">-</td> <td align="center" width="50">-</td> <td align="center" width="50">-</td> <td align="center" width="50">-</td> <td align="center" width="50">-</td> <td align="center" width="50">1</td> <td align="center" width="50">-</td> <td align="center" width="50">-</td> <td align="center" width="50">-</td> <td align="center" width="50">-</td> <td align="center" width="50">-</td> <td align="center" width="50">-</td> <td align="center" width="50">-</td> <td align="center" width="50">-</td> <td align="center" width="50">-</td> <td align="center" width="50">1</td> <td align="center" width="50"></td> <tr> <tr height="30"> <td align="center" width="50">003</td> <td align="center" width="50">CLOSED</td> <td align="center" width="50">1</td> <td align="center" width="50">-</td> <td align="center" width="50">-</td> <td align="center" width="50">-</td> <td align="center" width="50">-</td> <td align="center" width="50">-</td> <td align="center" width="50">-</td> <td align="center" width="50">-</td> <td align="center" width="50">-</td> <td align="center" width="50">-</td> <td align="center" width="50">1</td> <td align="center" width="50">-</td> <td align="center" width="50">-</td> <td align="center" width="50">-</td> <td align="center" width="50">-</td> <td align="center" width="50">-</td> <td align="center" width="50">-</td> <td align="center" width="50">-</td> <td align="center" width="50">-</td> <td align="center" width="50">-</td> <td align="center" width="50">1</td> <td align="center" width="50"></td> <tr> </table> </div> </div> </div> </main> </div><!-- wrapper --> </body>
We hope you get an idea about print a specific area of the web page using jQuery
We would like to have feedback on my Information blog .
Your valuable any feedback, Good question, Inspirational Quotes, or Motivational comments about this article are always welcome.
If you liked this post, Please donβt forget to share this as Well as Like FaceBook Page.
We hope This Post can help you…….Good Luck!.