PDF Printing

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.


Add a button to print a PDF file located on your hosting server:

 <button type="button" onclick="printJS('docs/printjs.pdf')">
    Print PDF


For large files, you can show a message to the user when loading files.

 <button type="button" onclick="printJS({printable:'docs/xx_large_printjs.pdf', type:'pdf', showModal:true})">
    Print PDF with Message


HTML Printing

Sometimes we just want to print selected parts of a HTML page, and that can be tricky. With Print.js, we can easily pass the id of the element that we want to print. The element can be of any tag, as long it has a unique id. The library will try to print it very close to how it looks on screen, and at the same time, it will create a printer friendly format for it.


Add a print button to a HTML form:

 <form method="post" action="#" id="printJS-form">

 <button type="button" onclick="printJS('printJS-form', 'html')">
    Print Form



Print.js accepts an object with arguments. Let's print the form again, but now we will add a header to the page:

 <button type="button" onclick="printJS({ printable: 'printJS-form', type: 'html', header: 'PrintJS - Form Element Selection' })">
    Print Form with Header


Image Printing

Print.js can be used to quickly print any image on your page, by passing the image url. This can be useful when you have multiple images on the screen, using a low resolution version of the images. When users try to print the selected image, you can pass the high resolution url to Print.js.


Load images on your page with just the necessary resolution you need on screen:

 <img src="images/print-01.jpg" />

In your javascript, pass the highest resolution image url to Print.js for a better print quality:

 printJS('images/print-01-highres.jpg', 'image');


Print.js uses promises to make sure the images are loaded before trying to print. This is useful when printing high resolution images that were are not yet loaded, like the example above.

You can also add a header to the image being printed:

 printJS({printable: 'images/print-01-highres.jpg', type: 'image', header: 'My cool image header'});


JSON Printing

A simple and quick way to print dynamic data or array of javascript objects.


We have the following data set in our javascript code. This would probably come from an AJAX call to a server API:

 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'

We can pass it to Print.js:

 <button type="button" onclick="printJS({printable: someJSONdata, properties: ['name', 'email', 'phone'], type: 'json'})">
    Print JSON Data


We can style the data grid by passing some custom css:

 <button type="button" onclick="printJS({
	    printable: someJSONdata,
	    properties: ['name', 'email', 'phone'],
	    type: 'json',
	    gridHeaderStyle: 'color: red;  border: 2px solid #3971A5;',
	    gridStyle: 'border: 2px solid #3971A5;'
    Print JSON Data


Download and Install

Download the latest release here, or fork the repository on Github.

Download v1.0.23

To install using npm:

  npm install print-js --save

To install using yarn:

  yarn add print-js

To install using bower:

  bower install print-js --save

CDN is also available, thanks to KeyCDN:


Getting Started

First we need to include the Print.js library on the page.

 <script src="print.js"></script>

If you will use the modal feature, also include Print.css on the page.

 <link rel="stylesheet" type="text/css" href="print.css">

That's it. You can now use Print.js in your pages.

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

Using Print.js

There are four print document types available: 'pdf', 'html', 'image' and 'json'.

The default type is 'pdf'.

It's basic usage is to call printJS() and just pass in a PDF document url: printJS('docs/PrintJS.pdf').

For image files, the idea is the same, but you need to pass a second argument: printJS('images/PrintJS.jpg', 'image').

To print HTML elements, in a similar way, pass in the element id and type: printJS('myElementId', 'html').

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


Print.js will accept an object as argument, where you can configure some options:

Default Value
Document source: pdf or image url, html element id or json data object.
Document type.
Optional header to be used with HTML, Image or JSON printing. It will be placed on the top of the page.
'font-weight: 300;'
Optional header style to be applied to the header text.
Max document width in pixels. Many people would recommend this to be around 600px. We tested many prints with 800 and it fits well for us. Change this as you need.
Typeface used when printing HTML or JSON.
Font size used when printing HTML or JSON.
This is used to keep or remove padding and margin from elements that are being printed. Sometimes these styling settings are great on screen but it looks pretty bad when printing. You can remove it by setting this to false.
To print text in color, set this property to true. By default all text will be printed in black.
Used when printing JSON. These are the object property names.
'font-weight: bold;'
Optional style for the grid header when printing JSON data.
'border: 1px solid lightgray; margin-bottom: -1px;'
Optional style for the grid rows when printing JSON data.
Enable this option to show user feedback when retrieving or processing large PDF files.
'Retrieving Document...'
Message displayed to users when showModal is set to true.
When printing html, image or json, this will be shown as the document title. It will also be the name of the document, if the user tries to save the print job to a pdf file.

Browser Compatibility

Currently, not all library features are working between browsers. Below are the results of tests done with these major browsers, using their latest versions.

Google Chrome
Internet Explorer

Thank you BrowserStack for the support. Amazing cross-browser testing tool.