Custom Webpage Printing library In Pure JavaScript – Print.js

Category: Javascript , Recommended | September 26, 2020
Author:crabbly
Views Total:243 views
Official Page:Go to website
Last Update:September 26, 2020
License:MIT

Preview:

Custom Webpage Printing library In Pure JavaScript – Print.js

Description:

Print.js is a pure JavaScript library that helps you print any elements (pdfs, images, HTML elements, or JSON data objects) from your webpages & files.

Install it via NPM:

$ npm install print.js

How to use it:

Import the print.js into your web project or directly include the JavaScript file onto your webpage.

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

Print a file (e.g. pdf) that is stored in your web server.

printJS('doc.pdf')

Print specific part of your webpage.

<div id="printJS-html">
    ...
</div>
printJS('printJS-html', 'html')

Print an image from your webpage.

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

All possible configuration options.

printJS(SELECTOR, {
  printable: null, // Document source: pdf or image url, html element id or json data object.
  type: 'pdf', // 'pdf', 'html', 'image', 'raw-html', and 'json'
  header: null, // header content
  headerStyle: {font-weight: 300;}
  maxWidth: 800,
  css: null, // path to css file
  style: null,
  scanStyles: true, 
  targetStyle: null, // Ex.: ['padding-top', 'border-bottom']
  targetStyles: null, // Ex.: ['border', 'padding']
  gridHeaderStyle: 
  properties: null, // Used when printing JSON. These are the object property names.
  gridHeaderStyle: 'font-weight: bold;', // Used when printing JSON. 
  gridStyle: 'border: 1px solid lightgray; margin-bottom: -1px;', // Used when printing JSON. 
  repeatTableHeader: true,
  base64: false, // Used when printing JSON. 
  showModal: null, // show user feedback when retrieving or processing large PDF files.
  modalMessage: 'Retrieving Document...',
  documentTitle: 'Document',
  fallbackPrintable: null // pass a different pdf document to be opened instead of the original passed in `printable`
});

Callback functions.

printJS(SELECTOR, {
  onLoadingStart: null,
  onLoadingEnd: null,
  onPdfOpen: null,
  onPrintDialogClose: null,
  onError: null,
});

Changelog:

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

11/21/2018

  • Fix isChrome check

10/17/2018

  • fix html print bug in safari

10/12/2018

  • v1.5.52: fix issue when setting JSON column size

09/22/2018

  • v1.5.2: set window.printJS

07/20/2018

  • remove console log

07/01/2018

  • Adding the functionality to read the properties as an array of objects

06/06/2018

  • update collectStyles match, skip empty properties

05/27/2018

  • clean blob url after print

05/25/2018

  • improve html style processing

You Might Be Interested In:


Leave a Reply