Home » Blog » 10 Awesome jQuery Print Page Plugins

10 Awesome jQuery Print Page Plugins

Are you trying to create a print pleasant web site with customized implementation as an alternative of default browser behaviour? Do you need to permit your customers to print particular elements of the online web page, as an alternative of being pressured to print the entire web page? Do you want to add customized headers and footers and implement totally different CSS types for the print model of the web page? In that case, then you will have simply struck gold with this text!

Right here you’ll discover a listing of 10 superior jQuery print web page plugins which let you customise the default print behaviour of the browser and supply numerous nice customizations like printing web page sections solely, displaying print previews earlier than printing content material, including a customized header and footer and utilizing exterior type sheets for doc printing. Take pleasure in!

The Prime 10 Listing

 

printThis

https://github.com/jasonday/printThis

printThis

printThis is a light-weight jQuery plugin which permits customers to print both particular parts or the entire web page. Utilizing this plugin, one can:

  • Print a number of parts
  • Protect the web page’s CSS/styling whereas printing
  • Have the choice so as to add your personal CSS particularly for printing
  • Outline a header and footer textual content which shall be appended on the print web page
  • Play with numerous choices earlier than printing the web page. For instance, eradicating inline types.

  jQuery printThis

jQuery printThis

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

jQuery printThis is an easy jQuery plugin which lets you print any net web page. It additionally permits you to embrace or exclude sections of the doc whereas printing. To specify which sections you’d like to incorporate or exclude, you’ll be able to specify id, class and even the html factor tag. It additionally helps printing your webpage with a specified stylesheet. Merely present the identify of the stylesheet file and the plugin will use types from that file when creating the print doc.

PrintPage

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

Printpage

Printpage is a jQuery plugin which lets you print the online web page with out leaving the web site. This plugin was created to beat the problems with the normal technique of printing, which reuires using the print stylesheet. The print stylesheet is a method to disable every thing that isn’t related content material. However working on this program will get messy and disabling numerous elements of the web site may be tedious. PrintPage overcomes these points by creating an iFrame and printing it instantly as an alternative of opening a popup.

Print Preview

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

Print Preview

The jQuery Print Preview plugin is designed to offer guests with a preview of the print model of an internet site. In contrast to conventional print previews this plugin brings in all content material and print types inside a modal window. From the modal window, there’s an choice to print the web page and shut the modal window. This plugin works in all the fashionable browsers.

offReg

https://github.com/vonKristoff/offreg

OffReg

Offreg is a jQuery plugin that makes use of canvas to create a ‘display print’ offset impact on a picture, by altering the pixel knowledge. It could convert your pictures into RGB prints, works additionally very nicely with B&W pictures and even on clear pictures. This plugin additionally presents numerous choices to set transparency, rotation and offset parameters.

PrintMe

https://github.com/menusal/printMe

PrintMe

PrintMe is a light-weight jQuery plugin for printing any html aspect. It is just depending on jQuery library. This plugin additionally permits the consumer so as to add exterior type CSS and add a title to the doc. You’ll be able to add a number of exterior type sheets to this plugin whereas calling it.

Print

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

Print

Print is a simple and easy jQuery plugin that permits the webpage customer to print just one particular a part of the online web page. By default, this plugin creates a hidden iFrame component in order that it could actually print from an iFrame as an alternative of a pop-up window. This may be managed by setting this feature to ‘true/false’. Like different plugins, it additionally helps exterior type sheets and permits appending/prepending customized headers and footers to paperwork. To exclude any aspect of the web page from printing, simply apply “no-print” CSS class to that part and the plugin will deal with the remaining.

PrintArea

https://github.com/RitsC/PrintArea

PrintArea

PrintArea is a jQuery Plugin that permits your guests to print a selected part of the web page. This plugin permits you to specify the mode of the print. Presently it helps iFrame and popup mode. The iFrame-mode is unobtrusive whereas popup mode opens a separate browser window. Popup mode permits for the choice of leaving the window open or routinely closing after printing.

Print Factor

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

Print Element

Print component is a quite simple and light-weight jQuery plugin for printing content material off any net web page. It additionally lets you both print from a popup window or from iFrame. This plugin permits you to set the web page title, override the default CSS and set iFrame mode choices for styling and positions.

jQuery Print Preview

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

Print Preview

jQuery Print Preview is an easy jQuery plugin for displaying a print preview earlier than truly printing the content material. It really works for a selected aspect or full web page. It opens a brand new popup window to point out what precisely will probably be printed. It additionally gives numerous choices to mess around with the print preview window. You possibly can set width, peak, prime, left, web page title and set a brand new type to override the prevailing types.

jQuery Code

These jQuery plugins will all serve you nicely relying in your wants, however in case you don’t want to use and of those jQuery plugins, right here is an easy jQuery code to print the entire web page:

$(doc).prepared(perform() 
   $(‘#btnPrint’).click on(perform() 
       window.print();
   
);

It’s also possible to print particular sections of the web page by hiding the opposite content material on the web page:

$(doc).prepared(perform() 
   $(‘#btnPrint’).click on(perform() 
      //Disguise all different parts aside from elmToPrint.
      $("#elmToPrint").present();
      window.print();
   
);

Need to see a working pattern of the jQuery code for printing sections of the web page? Look here!

Conclusion

Though lately printing a webpage shouldn’t be widespread, when the necessity arises it’s good to have the ability to full the duty shortly and simply. These jQuery print web page plugins permit you to print both full net pages or particular sections of the web page. They provide nice customization to overwrite default print behaviour of the browsers, and you may also add customized headers and footers and use exterior fashion sheets for doc printing. These plugins are very light-weight, straightforward to setup and fast to combine. Even when they aren’t used commonly, implementing one among these plugins will make like simpler for you and your web site guests!