JavaScript Printing an Element Tutorial

Submitted by oretnom23 on Saturday, June 11, 2022 - 16:50.

In this tutorial, you will learn a simple way to print the specific element in your web applications page using JavaScript and jQuery. This technique is useful for your future project for printing reports that have already a display. With this, it helps you to prevent redundant coding just for creating a page for printing. Using this printing technique developer can also modify or customize the element before printing and without changing the original display.

Library Needed:

https://jquery.com/

Method Use:

JS clone()
JS window.open()
JS setTimeout()
DOM Manipulation

Printing Code

Below is the example js script for printing the specific element on the window page. The script also includes all the styles and script loaded on the page to maintaint the design of the element to print.

function print_el(){
        //HTML head tag that contains the loaded stylesheets and scritps
        var header = $('head').clone()
        //Cloning the Element to Print
    var el = $('#printout').clone()
 
    //Opening a new window 
    var nw = window.open('', '_blank', "width=" + ($(window).width() * .8) + ", left=" + ($(window).width() * .1) + ",height=" + ($(window).height() * .8) + ", top=" + ($(window).height() * .1))
 
    //Manipulating the New Window head tag
    nw.document.querySelector('head').innerHTML = header.html()
    //Manipulating the New Window content
    nw.document.querySelector('body').innerHTML = el[0].outerHTML
    nw.document.close()
    setTimeout(() => {
        //Printing the New Window
        nw.print()
        setTimeout(() => {
            nw.close()
        }, 300)
    }, 300)
}

I will be providing below a simple HTML and JavaScript Source Code file for a simple web application that contains a feature that meets our goal for this tutorial. The source code only prints the specific element but maintains the element design.

Main Interface

The following script is the HTML file naming index.html. This file contains the HTML Scripts of the elements that are shown when browsing the page.

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS Custom Print</title>
    <!-- Styles -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <!--end of Styles -->
 
    <!-- Scritps -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/js/all.min.js" integrity="sha512-6PM0qYu5KExuNcKt5bURAoT6KCThUmHRewN3zUFNaoI6Di7XJPTMoT6K0nsagZKk2OB4L7E3q1uQKHNHd4stIQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="./script.js"></script>
    <!-- end of Scritps -->
</head>
 
<body class="bg-gradient-dark">
    <div class="content py-4">
        <div class="container">
            <div class="card rounded-0">
                <div class="card-header">
                    <div class="d-flex w-100 align-items-center">
                        <div class="col-auto flex-shrink-1 flex-grow-1">
                            <div class="card-title"><b>Printing Page Element using JavaScrip</b></div>
                        </div>
                        <div class="col-auto">
                            <button class="btn btn-success bg-gradient bg-success btn-sm rounded-0" type="button" id="print"><i class="fa fa-print"></i> Print Data</button>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="container-fluid">
                        <h5 class="fw-bolder">Data to Print:</h5>
                        <div class="border rouded-0 border-dark p-2">
                            <div id="printout">
                                <div class="lh-1">
                                    <h1 class="text-center">Lorem Ipsum</h1>
                                    <h4 class="text-center mb-0">"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</h4>
                                    <h5 class="text-center fw-lighter mb-0">"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</h5>
                                </div>
                                <hr>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nisl nibh. Pellentesque sit amet orci lacinia, facilisis tortor in, ultrices enim. Maecenas elementum metus vitae lacus sodales viverra. Cras in ultrices orci,
                                    vel sollicitudin arcu. Aliquam erat volutpat. Praesent in nisi magna. In vel urna et turpis lobortis hendrerit in sed est. Aliquam eu enim felis. Vivamus eget accumsan ante. Pellentesque ut laoreet magna. Maecenas quis
                                    magna ac est finibus pharetra. Curabitur accumsan faucibus nunc, blandit congue tellus consectetur vitae. Proin auctor risus vel orci ornare, sit amet vestibulum nunc scelerisque. Suspendisse consectetur mi sit amet
                                    nisl sodales, in faucibus mi placerat. In maximus efficitur metus quis venenatis.</p>
 
                                <p>Duis placerat id dui in vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Suspendisse sagittis, sapien sit amet congue blandit, leo nunc convallis mauris, ac lacinia nunc
                                    sem quis nulla. Nullam viverra, dui eu dapibus pellentesque, dolor diam luctus risus, a posuere diam nisi ac ligula. Sed at augue ut mauris lacinia pellentesque non sit amet ipsum. Donec sollicitudin faucibus facilisis.
                                    Sed viverra imperdiet arcu eget lacinia. Pellentesque ultricies rhoncus quam non feugiat. Etiam commodo lorem ac risus aliquam aliquam. Pellentesque eget nibh a nunc dapibus consectetur. Aliquam sapien turpis, molestie
                                    vel nunc vitae, placerat sollicitudin enim. Vivamus et tellus rhoncus diam rhoncus tristique et et dui. Nunc mattis, purus et mollis luctus, urna massa placerat mi, vel facilisis magna ligula ut felis. Orci varius natoque
                                    penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
 
                                <h3><b>Table</b></h3>
                                <hr>
                                <table class="table table-stripped table-bordered">
                                    <thead>
                                        <tr class="bg-gradient bg-danger bg-opacity-25">
                                            <th class="py-1 text-center">#</th>
                                            <th class="py-1 text-center">Name</th>
                                            <th class="py-1 text-center">Contact</th>
                                            <th class="py-1 text-center">Address</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <th class="py-1 text-center">1</th>
                                            <th class="py-1">Mark Cooper</th>
                                            <th class="py-1">09123456789</th>
                                            <th class="py-1">Sample Address #101</th>
                                        </tr>
                                        <tr>
                                            <th class="py-1 text-center">2</th>
                                            <th class="py-1">Samantha Jane Miller</th>
                                            <th class="py-1">09123654789</th>
                                            <th class="py-1">Sample Address #102</th>
                                        </tr>
                                        <tr>
                                            <th class="py-1 text-center">3</th>
                                            <th class="py-1">John Doe</th>
                                            <th class="py-1">09456789123</th>
                                            <th class="py-1">Sample Address #102</th>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Page Display Snapshot

Main Script

The following script is a JavaScript naming script.js. This file is included and loaded in the index.html file. It contains the JavaScript codes for printing the element file.

$(function() {
    $('#print').click(function() {
        var header = $('head').clone()
        var el = $('#printout').clone()
 
        var nw = window.open('', '_blank', "width=" + ($(window).width() * .8) + ", left=" + ($(window).width() * .1) + ",height=" + ($(window).height() * .8) + ", top=" + ($(window).height() * .1))
        nw.document.querySelector('head').innerHTML = header.html()
        nw.document.querySelector('body').innerHTML = el[0].outerHTML
        nw.document.close()
        setTimeout(() => {
            nw.print()
            setTimeout(() => {
                nw.close()
            }, 300)
        }, 300)
    })
})

Print View Snapshot

That's it! You can now test the source code on your end by browsing the index.html file in your preferred browser such as Chrome Browser. If you have encountered an error on your end, please review the changes you made to the scripts and differentiate them from the source code I provided above. You can also download the zip file of the source code I created for this tutorial. The download button is located below this article.

DEMO VIDEO

That's the end of this tutorial! I hope this JavaScript Tutorial for Printing the HTML Element will help you with what you are looking for and you'll find this tutorial useful for your future web application projects. Explore more on this website for more Tutorials and Free Source Codes..

Enjoy Coding:)

Add new comment

677 views