Many front-end developers need to generate print of current HTML content with all pages header footer without using any third-party library or APIs. In this article, we will discuss how to print HTML content using JavaScript/jQuery. here we use print media query, print media provide paged material and documents viewed on a screen in print preview mode.
So lets, start
Design HTML content as per your need, here I have added a sample document.
<body>
<div id="printableArea">
<!--page header repeat on every page-->
<div class="page-header" style="text-align: center">
<b>PAGE HEDARE</b>
</div>
<!--page footer repeat on every page-->
<div class="page-footer" style="text-align: center">
<b>PAGE FOOTER</b>
</div>
<table width="100%">
<thead>
<tr>
<td>
<!--place holder for the fixed-position header-->
<div class="page-header-space"></div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td><button onclick="Print();">Print</button></td>
</tr>
<tr>
<td>
<div class="new-page">
<p>
<b>Jignesh Patel</b> is a Senior Full Stack .Net Developer has extensive experience with
designing
and developing enterprise-scale applications. He has good skills in ASP.NET C#, ASP.NET
MVC,
AngularJS, Angular, Nodejs, Web API, EPPlus, SQL, Entity Framework, JavaScript, Azure
Web
Jobs, Microsoft Graph API, etc.
</p>
</div>
<div class="new-page">PAGE 2</div>
<div class="new-page">PAGE 3</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<!--place holder for the fixed-position footer-->
<div class="page-footer-space"></div>
</td>
</tr>
</tfoot>
</table>
</div>
</body>
*Note: new-page class adds a new page in print mode.
Add the below CSS in head tag:
<style>
.page-header,
.page-header-space {
height: 100px;
}
.page-footer,
.page-footer-space {
height: 50px;
}
.page-footer,
.page-header {
background-color: #efefef;
}
.page-footer {
position: fixed;
bottom: 0;
width: 100%;
border-top: 1px solid #0067B8;
}
.page-header {
position: fixed;
top: 0mm;
width: 100%;
border-bottom: 1px solid #0067B8;
}
.new-page {
page-break-after: always;
}
@page {
margin: 20mm
}
@media print {
thead {
display: table-header-group;
}
tfoot {
display: table-footer-group;
}
button {
display: none;
}
body {
margin: 0;
}
}
</style>
Now, add below script tag:
<script type="text/javascript">
function Print() {
window.print();
}
</script>
This script prints current whole page content, if you want to print specific current page content then use the below script:
<script type="text/javascript">
function Print() {
var printContents = document.getElementById("printableArea").innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
</script>
Now run the application and click and Print button.
I hope this article helps you and you will like it.
