Easy-to-Use Element Print Plugin for jQuery

jQuery.print is a plugin for printing certain parts of a page. Print is an easy and simple jQuery plugin that allows the visitor to print only the selected region of your web page.

jquery print section of page, print another page using jquery, jquery print div, jquery print page number, jquery print popup window, jquery print div with css

How to make use of it:

1. Specify a distinctive ID to your HTML aspect and the place you wish to make it printable.

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

2. Create a button to print the required HTML aspect.

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

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

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

. Call the plugin on the print button and accomplished.

$(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 : "https://fonts.googleapis.com/css?display=swap&family=Inconsolata", 

  //Print in a hidden iframe
  iframe : false, 

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

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

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

  // 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>'

});

Currently, this plugin supports the following options:

globalStyles

  • Default: true
  • Acceptable-Values: Boolean
  • Function: Whether or not the styles from the parent document should be included

mediaPrint

  • Default: false
  • Acceptable-Values: Boolean
  • Function: Whether or not link tags with media=’print’ should be included; Over-ride by the globalStyles option

stylesheet

  • Default: null
  • Acceptable-Values: URL-string or Array of URL-strings
  • Function: URL of an external stylesheet to be included

noPrintSelector

  • Default: ".no-print"
  • Acceptable Values: Any valid jQuery-selector
  • Function: A selector for the items that are to be excluded from printing

iframe

  • Default: true, creates a hidden iframe if a no-valid iframe selector is passed
  • Acceptable Values: Any valid jQuery-selector or Boolean
  • Function: Whether to print from an iframe instead of a pop-up window; can take the jQuery-selector of an existing iframe as value

append/prepend

  • Default: null
  • Acceptable Values: Any valid jQuery-selector or HTML-text
  • Function: Adds custom HTML before (prepend) or after (append) the selected content

manuallyCopyFormValues

  • Default: true
  • Acceptable-Values: Boolean
  • Function: Should it copy user-updated form input values onto the printed markup (this is done by manually iterating over each form element)

deferred

  • Default: $.Deferred()
  • Acceptable Values: Any valid jQuery.Deferred object
  • Function: A jQuery.A deferred object is resolved once the print function is called. Can be used to set up callbacks.

timeout

  • Default: 750
  • Acceptable-Values: Time in Milliseconds for setTimeout
  • Function: To change the amount of max time to wait for the content, etc to load before printing the element from the new window/iframe created, as a fallback if the load event for the new window/iframe has not fired yet

title

  • Default: null, uses the host page title
  • Acceptable-Values: Any single-line string
  • Function: To change the printed title

doctype

  • Default: '<!doctype html>'
  • Acceptable-Values: Any valid doctype string
  • Function: To prepend a doctype to the printed document frame

jQuery Plugin To Print Any Part Of Your Page, jQuery Print Plugin/Github, jquery print div with bootstrap, jquery print preview


See Demo And Download

Official Website(DoersGuild): Click Here

This superior jQuery/javascript plugin is developed by DoersGuild. For extra Advanced Usage, please go to the official website.

Share