print a specific area of the web page using jQuery
Contents
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!.
I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I’m a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.