Mastering Print Functionality in Web Development with jQuery

In today's blog post, we're going to delve into an essential feature for web applications: print functionality. This is especially useful for applications that involve invoices, reports, or any content that users might need a physical copy of. We’ll explore how to implement this using JavaScript and jQuery with a simple and effective approach.

Understanding the Code

Let’s break down the snippet that makes this magic happen:

var restorepage = $('body').html();
var printcontent = $('#' + el).clone();
$('body').empty().html(printcontent);
window.print();
$('body').html(restorepage);

This piece of code ensures that only the desired content gets printed while temporarily hiding the rest of the page. Here's how it works step-by-step:

Backup the Current Page Content

var restorepage = $('body').html();

We start by saving the current HTML content of the entire body. This allows us to restore it after the printing is done.

Clone the Content to be Printed

var printcontent = $('#' + el).clone();

Here, we clone the HTML content of the element with the ID stored in the variable el. Cloning is essential to keep the original content intact in the DOM.

Replace the Body Content with the Cloned Content

$('body').empty().html(printcontent);

The body of the document is emptied and replaced with the cloned content. Now, only the content we want to print is visible in the body.

Trigger the Print Dialog

window.print();

This command triggers the browser's print dialog, allowing the user to print the current view of the page.

Restore the Original Page Content

$('body').html(restorepage);

Finally, the original content of the body is restored, making the page look as it was before the print action was initiated.

Implementing the Print Functionality

To implement this functionality in your web application, follow these steps:

Include jQuery

Make sure jQuery is included in your project. You can add it via CDN:

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

Create the Print Function

Add the following JavaScript function to your script:

function printElement(el) {
    var restorepage = $('body').html();
    var printcontent = $('#' + el).clone();
    $('body').empty().html(printcontent);
    window.print();
    $('body').html(restorepage);
}

Add a Print Button

Create a button or link that calls the printElement function when clicked. Make sure to pass the ID of the element you want to print:

<button onclick="printElement('printSection')">Print Content</button>

Mark the Content to Print

Wrap the content you want to print within an element with a specific ID:

<div id="printSection">
    <!-- Content to be printed -->
</div>

Considerations

• Styles for Print: Ensure that your print styles are properly defined in your CSS. You can use @media print to customize the appearance of your content when printed.
• Content Cloning: Cloning the content ensures that any interactive elements (like forms or scripts) are not copied over to the print view, preventing potential issues.

By following these steps, you can add robust print functionality to your web application, enhancing its usability and user experience.

Conclusion

Printing web content is a common requirement, and with jQuery, it's a breeze to implement. The code snippet we discussed provides a straightforward method to print specific parts of your web page without any hassle. Try integrating this into your next project and see how it improves the functionality and professionalism of your application.