Print HTML/JSON/PDF/Image From The Web – Print.js

Print.js is a small yet powerful and customizable JavaScript print library which enables you to print HTML, JSON, PDF, and Image directly from the web.

How to use it:

Install & Download.

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

Import the package.

import print from 'print-js'

Or directly import the minified version of the Print.js into the page.

<script src='src/js/print.min.js'></script>

Print a PDF file you specify.

printJS('test.pdf');

Print any HTML content you specify.

<div id="example">
  <h1>Hello World</h1>
</div>

printJS(example, 'html');

Print JSON data.

let data = [
    {
        test1: 'Test1 string',
        test2: {
            a: 'Test2 object, a property',
        }
    },
    {
        test1: 'more Test1 string',
        test2: {
            a: 'more Test2 object, a property',
        }
    }
]

printJS({printable: data, properties: ['test1', 'test2.a'], type: 'json'})

Print images you specify.

printJS('images.jpg', 'image')
 // or
printJS({
  printable: ['1.jpg', '2.jpg', '3.jpg'],
  type: 'image'
})

Available settings to customize the print library.

printJS({
  // element to print
  printable: null,
  // fallback for PDF print
  fallbackPrintable: null,
  // 'pdf', 'html', 'image', 'json'
  type: 'pdf',
  // custom print header
  header: null,
  // header style
  headerStyle: 'font-weight: 300;',
  // max width in px
  maxWidth: 800,
  // font family
  font: 'TimesNewRoman',
  // font size
  font_size: '12pt',
  // keep or remove padding and margin from elements 
  honorMarginPadding: true,
  // print text in color
  honorColor: false,
  // properties for json print
  properties: null,
  gridHeaderStyle: 'font-weight: bold; padding: 5px; border: 1px solid #dddddd;',
  gridStyle: 'border: 1px solid lightgray; margin-bottom: -1px;',
  // show a modal 
  showModal: false,
  // modal message
  modalMessage: 'Retrieving Document...',
  // frame ID
  frameId: 'printJS',
  // document title
  documentTitle: 'Document',
  // an array of styles 
  targetStyle: null,
  targetStyles: null,
  // elements to ignore
  ignoreElements: [],
  // image style
  imageStyle: 'width:100%;',
  // repeat table header
  repeatTableHeader: true,
  // callback functions
  onLoadingStart: null,
  onLoadingEnd: null,
  
})