jQuery Plugin To Print Any Part Of Your Page - Print

jQuery Plugin To Print Any Part Of Your Page - Print
File Size: 13.3 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="../jQuery.print.js"></script> 

4. Call the plugin on the print button.

<script type='text/javascript'>
$(function() {
$("#printable").find('.print').on('click', function() {
$.print("#printable");
});
});
</script> 

5. Settings.

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

$("#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>'

});
});

Change logs:

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.