A JavaScript Library For Printing Any Elements On The Page – Print.js

Category: Javascript , Recommended | February 18, 2021
Views Total:6,864 views
Official Page:Go to website
Last Update:February 18, 2021


A JavaScript Library For Printing Any Elements On The Page – Print.js


Print.js is a small yet powerful JavaScript library which enables you to preview and print any elements (PDF, HTML, IMAGE, DYNAMIC DATA) on the webpage.


# Yarn
$ yarn add print-js
$ npm install print-js --save

How to use it:

Include both print.css and print.js on the webpage.

<script src="print.js"></script>
<link rel="stylesheet" href="print.css">

Print a PDF file on the webpage without opening or downloading.


Print HTML content.

printJS('SELECTOR', 'html')

Print an image on the webpage.

printJS('img.jpg', 'image');

Print dynamic data (e.g. JSON) on the webpage.

mydata = [
       name: 'John Doe',
       email: '[email protected]',
       phone: '111-111-1111'
       name: 'Barry Allen',
       email: '[email protected]',
       phone: '222-222-2222'
       name: 'Cool Dude',
       email: '[email protected]',
       phone: '333-333-3333'
   printable: mydata, 
   properties: ['name', 'email', 'phone'], 
   type: 'json'

All default parameters.

// Document source: pdf or image url, html element id or json data object.
printable: null,
fallbackPrintable: null,
// Document type.
type: 'pdf',
// Optional header to be used with HTML, Image or JSON printing. 
// It will be placed on the top of the page.
header: null,
// Max document width in pixels. 
maxWidth: 800,
// Font Family
font: 'TimesNewRoman',
// Font size
font_size: '12pt',
// Used to keep or remove padding and margin from elements that are being printed.
honorMarginPadding: true,
// Print text in color
honorColor: false,
// Used when printing JSON.
properties: null,
// grid header when printing JSON data
gridHeaderStyle: 'font-weight: bold; padding: 5px; border: 1px solid #dddddd;',
// grid rows when printing JSON data
gridStyle: 'border: 1px solid lightgray; margin-bottom: -1px;',
// Enable this option to show user feedback when retrieving or processing large PDF files.
showModal: false,
// Message displayed to users when showModal is set to true.
modalMessage: 'Retrieving Document...',
// Frame ID
frameId: 'printJS',
// Document title
documentTitle: 'Document',
// Target styles
targetStyle: ['clear', 'display', 'width', 'min-width', 'height', 'min-height', 'max-height'],
targetStyles: ['border', 'box', 'break', 'text-decoration'],
// Elements to ignore
ignoreElements: [],
// Image style
imageStyle: 'width:100%;',
// Repeat table header
repeatTableHeader: true,
// Pass one or more css files URLs
css: null,
// Pass a string with custom style
style: null,
// When set to false, the library will not process styles applied to the html being printed. Useful when using the css parameter.
scanStyles: true,
// Callback functions
onLoadingStart: null,
onLoadingEnd: null,
onPrintDialogClose: null,


v1.6.0 (02/18/2021)

  • Fix base64 issue when param value is false
  • Fix issues with onPrintDialogClose callback
  • The library will now remove the print iframe from DOM once job is complete
  • Improve browser incompatibility check (IE). Deprecate onOpen property

v1.5.0 (10/11/2020)

  • Add support for HTML elements as printable param (alternate option to element id).

v1.4.0 (09/26/2020)

  • Added the css spinner back into the lib available style (optional)
  • Fixed missing font-size property in style processing

v1.3.1 (09/20/2020)

  • Improve style hiding the print iframe

v1.3.0 (09/18/2020)

  • Add support for PDF printing in Firefox
  • Fix IE bug when computing target styles

v1.2.0 (09/13/2020)

  • Enable PDF print support on Edge browser
  • Prevent parentNode call on null when modal element is not found

v1.1.1 (09/08/2020)

  • Fix issue when processing image elements in html template.

v1.1.0 (09/04/2020)

  • Allow use of relative references for pdf

v1.0.61 (05/27/2019)

  • Add check for IOS Chrome method to browser.js

v1.0.59 (05/26/2019)

  • Add custom html deep clone function
  • Add support for select element (copy user selected option / state)
  • Add canvas element support
  • Prevent oversized images from being cut off if no style is passed

v1.0.58 (05/24/2019)

  • Updated Typescript Interface with base64
  • Fixed issue with image print results showing wrong image order
  • Open base64 pdf documents into new tags in unsupported browsers

v1.0.57 (05/22/2019)

  • Prevent images from printing in wrong order

v1.0.56 (05/14/2019)

  • Update TypeScript interface.
  • The header has been updated to support HTML.

v1.0.55 (03/31/2019)

  • Add onBrowserIncompatible hook
  • Better type script support
  • Updated dependencies
  • PDF print will always preload file before firing job
  • Support base64 pdf print

v1.0.54 (03/28/2019)

  • Add option to print raw html

v1.0.54 (03/27/2019)

  • Updated Typescript interface
  • Fixes Chrome detection
  • Fixes HTML print bug
  • Fixes issue when setting JSON column size


  • v1.0.47: Fix bug that stopped images from printing.


  • added support for image printing in firefox
  • removed consolelog

You Might Be Interested In:

2 thoughts on “A JavaScript Library For Printing Any Elements On The Page – Print.js

Leave a Reply