The Easiest Way to Print Documents With Javascript - Print.js

Print.js was primarily written to help us print PDF files directly within our apps, without leaving the interface, and no use of embeds. For unique situations where there is no need for users to open or download the PDF files, and instead, they just need to print them. One scenario where this is useful, for example, is when users request to print reports that are generated on the server-side. These reports are sent back as PDF files. There is no need to open these files before printing them. Print.js offers a quick way to print these files within our apps.

1) Download and Install

npm install print-js --save
yarn add print-js

After installing via npm or yarn, you should import the library into your project, as shown below, prior to starting using it.

import print from 'print-js'

2) Getting Started

That’s it. You can now use Print.js on your pages.

When writing your javascript code, remember that the library occupies a global variable of printJS .

3) Using Print.js

Now, that we have correctly installed and imported the library let’s start using it.

The 4 types of documents you can print using Print.js:

i) PDF (Default)

Its basic usage is to call printJS() and just pass in a PDF document URL:

printJS('docs/PrintJS.pdf')

ii) HTML

To print HTML elements, in a similar way, pass in the element id and type:

printJS('myElementId', 'html')

iii) IMAGE

For image files, the idea is the same, but you need to pass a second argument:

printJS('images/PrintJS.jpg', 'image')

iv) JSON

When printing JSON data, pass in the data, type, and the data properties that you want to print:

 printJS( < printable: myData, type: 'json', properties: ['prop1', 'prop2', 'prop3'] >);

4) Examples

Enough of the theory, let’s now look at some useful illustrations on how we can use this library to get some good printing work done on our webpage:

1. Print an HTML Form

Print.js accepts an object with arguments. Let’s print an HTML form with a customized heading now :

JS Code

function printForm() < printJS(< printable: 'form1', type: 'html', targetStyles: ['*'], header: 'PrintJS - Print Form With Customized Header' >) >

HTML Code

Contact Form
 
First Name

2. Print Images

To print multiple images together, we can pass an array of images. We can also pass the style to be applied to each image :

JS Code

function printImages() < printJS(< printable: ['https://cdn.shopify.com/s/files/1/0284/4946/products/IMG_8999_720x.jpg?v=1580507812', 'https://bloomex.ca/components/com_virtuemart/shop_image/produc t/Make-a-Wish-LF102-53.png', 'https://s3.amazonaws.com/cdn.brecksbulbs.ca/images/500/60053.jpg'], type: 'image', header: 'Multiple Images', imageStyle: 'width:50%;margin-bottom:20px;' >) >

HTML Code

3. Print JSON Data

JS Code

 someJSONdata = [ < name: 'John Doe', email: 'john@doe.com', phone: '111-111-1111' >, < name: 'Barry Allen', email: 'barry@flash.com', phone: '222-222-2222' >, < name: 'Cool Dude', email: 'cool@dude.com', phone: '333-333-3333' >]

HTML Code

4. Print Styled JSON Data

We can now add custom styles to our data table as well as customize the table header text by sending an object array :

JS Code

 someJSONdata = [ < name: 'John Doe', email: 'john@doe.com', phone: '111-111-1111' >, < name: 'Barry Allen', email: 'barry@flash.com', phone: '222-222-2222' >, < name: 'Cool Dude', email: 'cool@dude.com', phone: '333-333-3333' >]

HTML Code

5. Handle Error while Printing PDF

You could also handle errors using the onError() method provided by print.js and display them to the users using alerts as shown in the example below:

JS Code

function printPdfError() < printJS(< printable: 'https://printjs.crabbly.com/notavalidpdfdocument.pdf', type: 'pdf', onError: function (error) < alert('Error found =>' + error.message) > >) >

HTML Code

 
Print.js Error handling

5) Browser Compatibility

Since print.js is a fairly new library, therefore, currently, not all library features are working between browsers. However, most of the leading browsers support all of the document types that this amazing library allows us to print. Below are the results of tests done with these major browsers, using their latest versions:

The tests were done using a cross-browser testing tool provided by BrowserStack .

So, that’s it about this useful Javascript library. I hope the information provided in this article provides value to you and helps you simplify and optimize the future printing tasks on your web app.

References: