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?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.

Related Posts

Data-Table-Generator-Tabulator

Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…

alert-confirm-prompt-attention-js

Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…

Bootstrap-4-Sidebar-Menu-Responsive-Template

Bootstrap 4 Sidebar Menu Responsive Template | MDB

Bootstrap Side Navbar – Responsive sidebar template based on the Bootstrap 4 framework. An easy-to-use, totally responsive, Google Material Design impressed aspect navigation for modern web app…

Bootstrap-4-Toast-Notification-Plugin

Lightweight Bootstrap 4 Toast Notification Plugin | BS4 Advanced Toast

A lightweight Bootstrap 4 Toast Notification plugin integrated with JS/jQuery. bs4-toast.js is a JavaScript library that enhances the native Bootstrap toast component with icons, buttons, callbacks, and…

Audio-Visualizations-Wave

How to Create Audio Visualizations with JavaScript | Wave.js

Audio Visualizer Library – wave.js is a vanilla javascript audio visualization library that provides 20+ creative audio visualization effects to bring more engagement to your visitor. Contribute…

bootstrap-5-treeview

Bootstrap 5 Treeview Dynamically Collapsible | bs5treeview

Bootstrap 5 Tree View is a very simple plug-in for creating a basic and elegant Treeview using BS5. For use with Bootstrap 5, the attributes have been…

Leave a Reply

Your email address will not be published. Required fields are marked *