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.

Example

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


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

Result:

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
 </button>

Result:

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.

Example

Add a print button to a HTML form:


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

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

Result:

Name:
Email:
Message:

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
 </button>

Result:

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.

Example

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

Result:

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

We are adding HTML templates for printing dynamic data from javascript objects. Contributions are welcome. Please fork the github repository.

Example

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
 </button>

Result:

Download and Install

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

Download v1.0.18

To install using npm:


  npm install print.js

To install using bower:


  bower install print.js

CDN is also available, thanks to KeyCDN:


  https://printjs-4de6.kxcdn.com/print.min.js
  https://printjs-4de6.kxcdn.com/print.min.css


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

Configuration

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

Argument
Default Value
Description
printable
null
Document source: pdf or image url, html element id or json data object.
type
'pdf'
Document type.
header
null
Optional header to be used with HTML, Image or JSON printing. It will be placed on the top of the page.
maxWidth
800
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.
font
'TimesNewRoman'
Typeface used when printing HTML or JSON.
font_size
'12pt'
Font size used when printing HTML or JSON.
honorMarginPadding
true
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.
honorColor
false
To print text in color, set this property to true. By default all text will be printed in black.
properties
null
Used when printing JSON. These are the object property names.
showModal
null
Enable this option to show user feedback when retrieving or processing large PDF files.
modalMessage
'Retrieving Document...'
Message displayed to users when showModal is set to true.

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
Safari
Firefox
Edge
Internet Explorer
PDF
HTML
Images
JSON

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