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.
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'
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 .
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'] >);
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:
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
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
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
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
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
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.