<html>
<head>
<title>how to print html div using JavaScript</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script>
function printDiv(divName) {
var printbody = document.getElementById(divName).innerHTML;
var orgbody = document.body.innerHTML;
document.body.innerHTML = printbody;
window.print();
document.body.innerHTML = orgbody;
}
</script>
</head>
<body>
<form id="form1">
<div class="col-md-12">
<div class="col-md-9">
<div class="x_content">
<section class="content invoice">
<div id="PrintFun" class="row">
<div class="col-xs-12">
<p class="lead">Amount</p>
<div class="table-responsive">
<table class="table">
<tbody>
<tr>
<th style="width:50%">Subtotal:</th>
<td>$300</td>
</tr>
<tr>
<th>Tax (9.3%)</th>
<td>$30.34</td>
</tr>
<tr>
<th>Shipping:</th>
<td>$10.80</td>
</tr>
<tr>
<th>Total:</th>
<td>$341.24</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="row no-print">
<div class="col-xs-12">
<input type="button" class="btn btn-success" onclick="printDiv('PrintFun')" value="Print" />
</div>
</div>
</section>
</div>
</div>
</div>
</form>
</body>
</html>