How To Print In Jquery

In this blog post, we will learn how to print content on a web page using jQuery. By following these simple steps,
you will be able to print specific elements or the entire page with ease.

What is jQuery?

jQuery is a popular, fast, and lightweight JavaScript library that simplifies HTML document traversal, event
handling, and animation. With its easy-to-use syntax, you can write less code while accomplishing more tasks.

Step 1: Include jQuery in Your Project

Before starting, make sure to include the jQuery library in your project. You can either download it from the
official jQuery website or include it directly from a CDN
(Content Delivery Network) like Google or Microsoft. To include it from a CDN, add the following line to the
head section of your HTML file:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    

Step 2: Create a Print Button

In your HTML file, create a button that will trigger the print action. Add an ID attribute to the button so that
we can easily reference it in our jQuery script.

    <button id="print-button">Print</button>
    

Step 3: Write the jQuery Script

Now, let’s write the jQuery script that will handle the print action. First, we need to wait for the DOM (Document
Object Model) to be ready. We can do this using the $(document).ready() function.

    $(document).ready(function () {
        // Your code here
    });
    

Inside the $(document).ready() function, we will add an event listener for the click event on
our print button. To do this, we will use the on() function and pass the event name (“click”)
and a callback function as arguments.

    $(document).ready(function () {
        $("#print-button").on("click", function () {
            // Your code here
        });
    });
    

In the callback function, we will use the JavaScript window.print() method to print the content
of the page.

    $(document).ready(function () {
        $("#print-button").on("click", function () {
            window.print();
        });
    });
    

Step 4: Print Specific Elements

If you want to print specific elements on the page, you can create a new window or an iframe, and then copy the
content you want to print into it. Finally, call the print() method on the new window or iframe.

    $(document).ready(function () {
        $("#print-button").on("click", function () {
            var printWindow = window.open("", "_blank");
            printWindow.document.write("<title>Print Content</title>");
            printWindow.document.write($("#element-to-print").html());
            printWindow.document.write("");
            printWindow.document.close();
            printWindow.print();
        });
    });
    

Replace #element-to-print with the ID or class of the element you want to print.

Conclusion

In this blog post, we’ve learned how to use jQuery to print content on a web page. By following these simple steps,
you can create a print button that prints the entire page or specific elements with ease. Happy printing!