How to print a specific area of the web page using jQuery

Many times you required to giving a printable option on your web project. If you are working on this kind of project and looking for a simple solution for that, then this tutorial will help a lot. In this article, we’ll provide a simple way to print a specific area of the web page. Using PrintArea jQuery plugin, you can easily print a part of a web page or full page content.

PrintArea jQuery Plugin designed to print specified areas of a web page. This plugin lets you specify 2 modes of printing, IFRAME-mode and Popup-mode. IFRAME-mode is discrete and popup mode opens a separate browser window.

JavaScript

Atfirst you should need to include the jQuery library (jquery.js) and PrintArea jQuery plugin (jquery.PrintArea.js).

<script src="jquery.js"></script>
<script src="jquery.PrintArea.js"></script>

Write the following JavaScript for trigger the PrintArea jQuery plugin. In mode variable, you can specify two modes, iframe or popup.

<script>
$(document).ready(function(){
    $("#printButton").click(function(){
        var mode = 'iframe'; //popup
        var close = mode == "popup";
        var options = { mode : mode, popClose : close};
        $("div.printableArea").printArea( options );
    });
});
</script>

HTML

The following HTMl contains a print button and contents for print.

<a href="javascript:void(0);" id="printButton">Print</a>  
<div class="printableArea">
    All the printable content goes here......
</div>

Conclusion

Using this script you can print not only a part of the web page, but also the full page content. Just attach id or class of the respective div with printArea() function. You can get the jquery.PrintArea.js file and all the source code from the downloadable package.