HTML

How To Print HTML Content Using JavaScript

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

Jignesh Patel

Jignesh Patel 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.