Printing a Specific HTML Element using jQuery Tutorial

Submitted by oretnom23 on Tuesday, October 12, 2021 - 16:02.

In this tutorial, we will tackle about how to create a javascript function that Prints a Specific HTML Element using jQuery. This can help you to lessen your work as a programmer in writing and the lines of your codes. This technique can also prevent code duplication.

The Print function that we will be creating is the cloned data from the HTML. Our goal for this tutorial is to duplicate the HTML Element using jQuery along the elements that contains the codes for styling the element to preserve the design of the element.

Getting Started

Download the jQuery library. For the user interface design, I will be using Bootstrap v5.

Creating the Interface

The script below is the HTML file for our index page of the web application. This contains the elements the element we will print later on. Save this file as index.html.

        <!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>Print Element using jQUery</title>
            <link rel="stylesheet" href="./css/bootstrap.min.css">
            <script src="./js/jquery-3.6.0.min.js"></script>
            <script src="./js/bootstrap.min.js"></script>
            <script src="./js/script.js"></script>
            <!-- Custom CSS -->
            <style>
 
            </style>
        </head>
 
        <body class="bg-light">
            <nav class="navbar navbar-expand-lg navbar-dark bg-primary bg-gradient" id="topNavBar">
                <div class="container">
                    <a class="navbar-brand" href="https://Sourcecodester.com">
                    Sourcecodester
                    </a>
                </div>
            </nav>
            <div class="container py-3" id="page-container">
                <h3><b>How to Print Data of Specific Element using jQUery</b></h3>
                <hr>
                <div id="printables">
                    <div class="to_print" id="first_element">
                        <h3 class="text-center"><b>First Element Sample Data</b></h3>
                        <hr>
                        <button class="btn btn-sm btn-success float-end rounded-0 my-2" class="button" onclick="print_element('first_element')">Print First Element</button>
                        <table class="table table-bordered table-striped">
                            <thead>
                                <tr class="bg-primary bg-gradient text-white">
                                    <th class="text-capitalize text-center py-1 px-2">name</th>
                                    <th class="text-capitalize text-center py-1 px-2">phone</th>
                                    <th class="text-capitalize text-center py-1 px-2">email</th>
                                    <th class="text-capitalize text-center py-1 px-2">address</th>
                                    <th class="text-capitalize text-center py-1 px-2">region</th>
                                    <th class="text-capitalize text-center py-1 px-2">text</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="px-2 py-1">Caldwell Stewart</td>
                                    <td class="px-2 py-1">(723) 398-8511</td>
                                    <td class="px-2 py-1">[email protected]</td>
                                    <td class="px-2 py-1">Ap #499-3016 Tincidunt St.</td>
                                    <td class="px-2 py-1">Antwerpen</td>
                                    <td class="px-2 py-1">Mauris vestibulum, neque sed dictum eleifend, nunc risus varius orci,</td>
                                </tr>
                                <tr>
                                    <td class="px-2 py-1">Jesse Serrano</td>
                                    <td class="px-2 py-1">(426) 346-7475</td>
                                    <td class="px-2 py-1">[email protected]</td>
                                    <td class="px-2 py-1">Ap #197-2368 Netus Rd.</td>
                                    <td class="px-2 py-1">Nordrhein-Westphalen</td>
                                    <td class="px-2 py-1">enim consequat purus. Maecenas libero est, congue a, aliquet vel,</td>
                                </tr>
                                <tr>
                                    <td class="px-2 py-1">Shea Donovan</td>
                                    <td class="px-2 py-1">1-512-856-0720</td>
                                    <td class="px-2 py-1">[email protected]</td>
                                    <td class="px-2 py-1">429-7540 Nulla. Avenue</td>
                                    <td class="px-2 py-1">British Columbia</td>
                                    <td class="px-2 py-1">lectus rutrum urna, nec luctus felis purus ac tellus. Suspendisse</td>
                                </tr>
                                <tr>
                                    <td class="px-2 py-1">Joshua Malone</td>
                                    <td class="px-2 py-1">(784) 452-6346</td>
                                    <td class="px-2 py-1">[email protected]</td>
                                    <td class="px-2 py-1">P.O. Box 461, 3954 Arcu. Street</td>
                                    <td class="px-2 py-1">Michoacán</td>
                                    <td class="px-2 py-1">laoreet ipsum. Curabitur consequat, lectus sit amet luctus vulputate, nisi</td>
                                </tr>
                                <tr>
                                    <td class="px-2 py-1">Basia Haynes</td>
                                    <td class="px-2 py-1">1-770-885-2056</td>
                                    <td class="px-2 py-1">[email protected]</td>
                                    <td class="px-2 py-1">Ap #187-2876 Phasellus Av.</td>
                                    <td class="px-2 py-1">Henegouwen</td>
                                    <td class="px-2 py-1">sagittis semper. Nam tempor diam dictum sapien. Aenean massa. Integer</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
 
                    <div class="to_print" id="second_element">
                        <h3 class="text-center"><b>Second Element Sample Data</b></h3>
                        <hr>
                        <button class="btn btn-sm btn-success float-end rounded-0 my-2" class="button" onclick="print_element('second_element')">Print Second Element</button>
                        <table class="table table-bordered table-striped">
                            <thead>
                                <tr class="bg-gradient bg-dark text-white">
                                    <th class="text-capitalize text-center py-1 px-2">name</th>
                                    <th class="text-capitalize text-center py-1 px-2">phone</th>
                                    <th class="text-capitalize text-center py-1 px-2">currency</th>
                                    <th class="text-capitalize text-center py-1 px-2">numberrange</th>
                                    <th class="text-capitalize text-center py-1 px-2">text</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="py-1 px-2">Laurel O'neill</td>
                                    <td class="py-1 px-2">(516) 671-6981</td>
                                    <td class="py-1 px-2">$2.60</td>
                                    <td class="py-1 px-2">1</td>
                                    <td class="py-1 px-2">massa. Quisque porttitor eros nec tellus. Nunc lectus pede, ultrices</td>
                                </tr>
                                <tr>
                                    <td class="py-1 px-2">Ulric Murray</td>
                                    <td class="py-1 px-2">1-607-328-3542</td>
                                    <td class="py-1 px-2">$92.00</td>
                                    <td class="py-1 px-2">6</td>
                                    <td class="py-1 px-2">at pede. Cras vulputate velit eu sem. Pellentesque ut ipsum</td>
                                </tr>
                                <tr>
                                    <td class="py-1 px-2">Diana Santiago</td>
                                    <td class="py-1 px-2">(712) 367-4128</td>
                                    <td class="py-1 px-2">$17.18</td>
                                    <td class="py-1 px-2">7</td>
                                    <td class="py-1 px-2">semper, dui lectus rutrum urna, nec luctus felis purus ac</td>
                                </tr>
                                <tr>
                                    <td class="py-1 px-2">Ramona Wood</td>
                                    <td class="py-1 px-2">(640) 623-7192</td>
                                    <td class="py-1 px-2">$44.30</td>
                                    <td class="py-1 px-2">7</td>
                                    <td class="py-1 px-2">Nulla tincidunt, neque vitae semper egestas, urna justo faucibus lectus,</td>
                                </tr>
                                <tr>
                                    <td class="py-1 px-2">Michelle Mueller</td>
                                    <td class="py-1 px-2">1-328-121-0647</td>
                                    <td class="py-1 px-2">$44.25</td>
                                    <td class="py-1 px-2">6</td>
                                    <td class="py-1 px-2">Nam consequat dolor vitae dolor. Donec fringilla. Donec feugiat metus</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <hr>
                <center><button class="btn btn-sm btn-success rounded-0 my-2" class="button" onclick="print_element('printables')">Print Both Element</button></center>
            </div>
        </body>
 
        </html>

Creating the JavaScirip/jQuery Script

The code below is the javascript/jquery script for printing the elements. The function below is being executed when Print Buttons are triggered. Save this file as script.js and include the file in your index.html file.

        function print_element($element_id = null) {
            if ($element_id == null) {
                // Alert Message when function was triggered without a element_id
                alert("No Element ID Selected");
            } else {
                // Cloning the specific element to print
                var el = $('#' + $element_id).clone()
                    // removing the button incuded on the element
                el.find('button').remove()
                    // cloning the element which contains the CSS for styling user-interface
                var head = $('head').clone()
                    // creating a temporary container of the element to print
                var new_html = $('<html>')
 
                head.find('title').append(' - Print View')
                    // adding the css to temporary container element
                new_html.append(head)
                new_html.append('<main></main>')
                    // adding the element to temporary container element
                new_html.find('main').append(el)
 
                // Opening a new window (Pop-up) for the print view
                var new_window = window.open('', '_blank', 'location=no,width=900,height=700,left=250')
                    // adding the content of temporary element to the new window
                new_window.document.write(new_html.html())
                    // closing the new window document
                new_window.document.close()
 
                setTimeout(() => {
                    // Trigger Print View
                    new_window.print()
                    setTimeout(() => {
                        // Automatically closes the pop window after printing / canceling print view
                        new_window.close()
                    }, 200)
                }, 200);
 
            }
        }

That's it! You can now test the source code you created on your end and see if it works as we planned. If there's an error occurred, kindly review the source code I provided above. Working source code is also provided in this article. Download Button is located below.

Result Snapshots

Page Interface

Page Print Preview

DEMO VIDEO

That ends this tutorial. I hope this tutorial will help you with what you are looking for and you'll find this useful for your future web application projects.

Explore more on this website for more Tutorials and Free Source Codes.

Happy Coding :)

Add new comment

1152 views