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

Submit a Comment

Your email address will not be published. Required fields are marked *

Subscribe

Select Categories