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

Category: Javascript | December 28, 2018
Author: BrighterTech
Views Total: 446
Official Page: Go to website
Last Update: December 28, 2018
License: MIT

Preview:

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

Description:

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,
  
})

You Might Be Interested In:


Leave a Reply