Learning jQuery

Are you looking to create a print friendly website with custom implementation instead of default browser behaviour? Do you want to allow your users to print specific parts of the web page, instead of being forced to print the complete page? Do you wish to add custom headers and footers and implement different CSS styles for the print version of the page? If so, then you have just struck gold with this article!

Here you’ll find a list of 10 awesome jQuery print page plugins which allow you to customize the default print behaviour of the browser and offer various great customizations like printing page sections only, showing print previews before printing content, adding a custom header and footer and using external style sheets for document printing. Enjoy!

The Top 10 List

 

printThis

https://github.com/jasonday/printThis

printThis is a lightweight jQuery plugin which allows users to print either specific elements or the complete page. Using this plugin, one can:

• Print multiple elements
• Preserve the page’s CSS/styling while printing
• Have the option to add your own CSS specifically for printing
• Define a header and footer text which will be appended on the print page
• Play with various options before printing the page. For example, removing inline styles.

  jQuery printThis

https://github.com/valluminarias/jquery-print-plugin

jQuery printThis is a simple jQuery plugin which allows you to print any web page. It also allows you to include or exclude sections of the document while printing. To specify which sections you’d like to include or exclude, you can specify id, class or even the html element tag. It also supports printing your webpage with a specified stylesheet. Simply provide the name of the stylesheet file and the plugin will use styles from that file when creating the print document.

PrintPage

https://github.com/posabsolute/jQuery-printPage-plugin

Printpage is a jQuery plugin which allows you to print the web page without leaving the website. This plugin was created to overcome the issues with the traditional method of printing, which reuires the use of the print stylesheet. The print stylesheet is a way to disable everything that is not relevant content. But working in this program gets messy and disabling various parts of the website can be tedious. PrintPage overcomes these issues by creating an iFrame and printing it directly instead of opening a popup.

Print Preview

https://github.com/etimbo/jquery-print-preview-plugin

The jQuery Print Preview plugin is designed to provide visitors with a preview of the print version of a website. Unlike traditional print previews this plugin brings in all content and print styles within a modal window. From the modal window, there is an option to print the page and close the modal window. This plugin works in all the modern browsers.

offReg

https://github.com/vonKristoff/offreg

Offreg is a jQuery plugin that uses canvas to create a ‘screen print’ offset effect on an image, by altering the pixel data. It can convert your images into RGB prints, works also very well with B&W photos and even on transparent photos. This plugin also offers various options to set transparency, rotation and offset parameters.

PrintMe

https://github.com/menusal/printMe

PrintMe is a lightweight jQuery plugin for printing any html element. It is only dependent on jQuery library. This plugin also allows the user to add external style CSS and add a title to the document. You can add multiple external style sheets to this plugin while calling it.

Print

https://doersguild.github.io/jQuery.print/

Print is an easy and simple jQuery plugin that allows the webpage visitor to print only one specific part of the web page. By default, this plugin creates a hidden iFrame element so that it can print from an iFrame instead of a pop-up window. This can be controlled by setting this option to ‘true/false’. Like other plugins, it also supports external style sheets and allows appending/prepending custom headers and footers to documents. To exclude any element of the page from printing, just apply “no-print” CSS class to that section and the plugin will take care of the rest.

PrintArea

https://github.com/RitsC/PrintArea

PrintArea is a jQuery Plugin that allows your visitors to print a specific section of the page. This plugin allows you to specify the mode of the print. Currently it supports iFrame and popup mode. The iFrame-mode is unobtrusive while popup mode opens a separate browser window. Popup mode allows for the option of leaving the window open or automatically closing after printing.

Print Element

http://projects.erikzaadi.com/jQueryPlugins/jQuery.printElement/

Print element is a very simple and lightweight jQuery plugin for printing content off any web page. It also allows you to either print from a popup window or from iFrame. This plugin allows you to set the page title, override the default CSS and set iFrame mode options for styling and positions.

jQuery Print Preview

https://github.com/alamnaryab/Print-Preview-jquery-plugin

jQuery Print Preview is a simple jQuery plugin for showing a print preview before actually printing the content. It works for a specific element or complete page. It opens a new popup window to show what exactly will be printed. It also offers various options to play around with the print preview window. You can set width, height, top, left, page title and set a new style to override the existing styles.

jQuery Code

These jQuery plugins will all serve you well depending on your needs, but if you don’t wish to use and of these jQuery plugins, here is a simple jQuery code to print the complete page:

$(document).ready(function() {
   $(‘#btnPrint’).click(function() {
       window.print();
   }
});

You can also print specific sections of the page by hiding the other content on the page:

$(document).ready(function() {
   $(‘#btnPrint’).click(function() {
      //Hide all other elements other than elmToPrint.
      $("#elmToPrint").show();
      window.print();
   }
});

Want to see a working sample of the jQuery code for printing sections of the page? Look here!

Conclusion

Although these days printing a webpage is not common, when the need arises it's nice to be able to complete the task quickly and easily. These jQuery print page plugins allow you to print either complete web pages or specific sections of the page. They offer great customization to overwrite default print behaviour of the browsers, and you can also add custom headers and footers and use external style sheets for document printing. These plugins are very lightweight, easy to setup and quick to integrate. Even if they aren’t used regularly, implementing one of these plugins will make like easier for you and your website visitors!