jQuery Plugins › jQuery Other Plugins › jQuery printThis

Customizable Multiple Elements Printing Plugin With jQuery - printThis

File Size: 392 KB
Views Total: 12187
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Demo Download

More in this category...

View Recommended Plugins

TOP 30 jQuery Plugins 2023

Chrome, IE8+, FireFox, Opera, Safari#Print
Customizable Multiple Elements Printing Plugin With jQuery - printThis

Yet another page printing plugin for jQuery that allows the user to print specific element(s) of your webpage, while preserving the page styles (and even additional CSS) and input/form values.

More features:

  • Auto removes inline styles.
  • Print delay supported.
  • Custom header and page title.

See Also:

Installation:

# NPM
$ npm install print-this

# Bower
$ bower install print-this

How to use it:

1. Place both jQuery library and the jQuery printThis plugin's script right before the closing body tag:

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="printThis.js"></script>

2. Attach the function printThis on any element(s) you want to print.

$('form,h1,p').printThis();

3. Possible options to customize the printing plugin.

$('SELECTORS').printThis({

  // shows debug info
  debug: false,

  // import page CSS
  importCSS: true,

  // import styles
  importStyle: false,

  // print outer container
  printContainer: true, 

  // additonal CSS file
  loadCSS: "", 

  // page title
  pageTitle: "",

  // remove inline styles
  removeInline: false, 

  // custom selectors to filter inline styles. removeInline must be true
  removeInlineSelector: "body *", 

  // print delay in ms
  printDelay: 333,

  // header 
  header: null,

  // footer
  footer: null,    

  // preserve input/form values
  formValues: true, 

  // preserve the base tag (if available)
  base: false,

  // copy canvas elements (experimental)
  canvas: false,

  // html doctype
  doctypeString: '<!DOCTYPE html>', 

  // remove script tags before appending
  removeScripts: false,

  // copy classes from the html & body tag
  copyTagClasses: false,

  // copy styles from html & body tag (for CSS Variables)
  copyTagStyles: false,
  
});

4. Callback functions available.

$('SELECTORS').printThis({

  // callback function for printEvent in iframe
  beforePrintEvent: null,         

  // function called before iframe is filled
  beforePrint: null,              

  // function called before iframe is removed
  afterPrint: null                
  
});

Changelog:

v2.0.0 (2022-06-04)

v1.16.0 (2022-05-30)

  • beforePrintEvent fix

v1.15.1 (2019-08-05)

  • beforePrintEvent fix

v1.14.1 (2018-11-04)

  • Fixed Canvas option only displays first canvas

v1.14.0 (2018-07-16)

  • Merge support for print event handlers from eakkew
  • Include fix for CSS Variables (via inline styles set on HTML tag)

2018-01-11

  • V1.12.2 - Merged fix for top-level Canvas support

2017-12-18

  • V1.12.1 - Merged fix for jQuery version limit

2017-10-30

  • V1.12.0 - Use clone(true) to copy form values

2017-08-02

  • V1.11.0 - Add copyBodyClasses function; Add copyTagClasses

2017-04-10

  • V1.10.0 - Added action, disabled by default, to avoid bringing unwanted scripts into the print iframe; Removed undocumented helper function $.fn.outer.

2017-03-07

  • V1.9.0 - Canvas updates

2017-01-17

  • V1.9.0 - Canvas updates

2017-01-17

  • V1.8.0 - Added "footers"

2016-12-15

  • Add base URL support and increment version

This awesome jQuery plugin is developed by jasonday. For more Advanced Usages, please check the demo page or visit the official website.