jQuery Plugins › jQuery Other Plugins › jQuery Print

jQuery Plugin To Print Any Part Of Your Page - Print

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

More in this category...

View Recommended Plugins

TOP jQuery Plugins For 2024

Chrome, FireFox, Opera, Safari#Print
jQuery Plugin To Print Any Part Of Your Page - Print

Print is an easy and simple jQuery plugin that allows the visitor to print only the specified area of your web page.

See also:

How to use it:

1. Specify an unique ID to your html element where you want to make it printable.

<div id="printable">
  Your Content
</div>

2. Create a button to print the specified html element.

<button class="print">
  Print this
</button>

3. Import the latest jQuery library and jQuery print plugin.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jQuery.print.js"></script>

4. Call the plugin on the print button and done.

$(function() {
  $("#printable").find('.print').on('click', function() {
    $.print("#printable");
  });
});

5. Available plugin settings.

$("#printable").print({

  // Use Global styles
  globalStyles : false, 

  // Add link with attrbute media=print
  mediaPrint : false, 

  //Custom stylesheet
  stylesheet : "http://fonts.googleapis.com/css?family=Inconsolata", 

  //Print in a hidden iframe
  iframe : false, 

  // Don't print this
  noPrintSelector : ".avoid-this",

  // Add this on top
  append : "Free jQuery Plugins<br/>", 

  // Add this at bottom
  prepend : "<br/>jQueryScript.net",

  // Manually add form values
  manuallyCopyFormValues: true,

  // resolves after print and restructure the code for better maintainability
  deferred: $.Deferred(),

  // timeout
  timeout: 250,

  // Custom title
  title: null,

  // Custom document type
  doctype: '<!doctype html>'

});

Changelog:

v1.6.2 (2021-06-12)

  • Support for adding multiple external style-sheets

v1.6.1 (2021-06-08)

  • Added canvas support

2018-10-02

  • Bugfix

2017-08-21

  • v1.6.0: Replce clone method with one that retains select and textarea values when cloning

2017-01-04

  • Fix printing issue on iPad

2016-09-15

  • Support the load event and set the timeout option as its fallback

2016-02-10

  • Reorganized code and added the doctype option

2015-08-02

  • Allow setting a custom timeout for accommodating different server load times, etc

2015-04-27

  • Fixed: Won't get changed form values from textareas

2015-04-08

  • Fixed: Mixed up append & prepend

2015-01-16

  • Manually add form values , add a deferred object that resolves after print and restructure the code for better maintainability

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