print a specific area of the web page using jQuery

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>

Free Live Chat for Any Issue

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>

Demo – Source code

Also Read This πŸ‘‰   jquery disable button

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!.