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

Result:

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


 printJS({
  printable: ['images/print-01-highres.jpg', 'images/print-02-highres.jpg', 'images/print-03-highres.jpg'],
  type: 'image',
  header: 'Multiple Images',
  imageStyle: 'width:50%;margin-bottom:20px;'
 })

Result:

JSON Printing

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

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:


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

Result:

Download and Install

You can download the latest version of Print.js from the GitHub releases.

Download v1.0.47

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:


  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.
headerStyle
'font-weight: 300;'
Optional header style to be applied to the header text.
maxWidth
800
Max document width in pixels. Many people would recommend this to be around 600px. We tested many prints with 800px and it fits well for us. Change this as you need.
css
null
This allow us to pass one or more css files URLs that should be applied to the html being printed. Value can be a string with a single URL or an array with multiple URLs.
style
null
This allow us to pass a string with custom style that should be applied to the html being printed.
scanStyles
true
When set to false, the library will not process styles applied to the html being printed. Useful when using the css parameter.
targetStyle
null
By default, the library process some styles only, when printing HTML elements. This option allows you to pass an array of styles that you want to be processed. Ex.: ['padding-top', 'border-bottom']
targetStyles
null
Same as `targetStyle`, however, this will process any a range of styles. Ex.: ['border', 'padding'], will include 'border-bottom', 'border-top', 'border-left', 'border-right', 'padding-top', etc.
You can also pass ['*'] to process all styles.
ignoreElements
[ ]
Accepts an array of html ids that should be ignored when printing a parent html element.
imageStyle
'width:100%;'
Used when printing images. Accepts a string with custom styles to be applied to each image.
properties
null
Used when printing JSON. These are the object property names.
gridHeaderStyle
'font-weight: bold;'
Optional style for the grid header when printing JSON data.
gridStyle
'border: 1px solid lightgray; margin-bottom: -1px;'
Optional style for the grid rows when printing JSON data.
repeatTableHeader
true
Used when printing JSON data. When set to false, the data table header will show in first page only.
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.
onLoadingStart
null
Function to be executed when PDF is being loaded
onLoadingEnd
null
Function to be executed after PDF has loaded
documentTitle
'Document'
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.
honorMarginPadding (deprecated )
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 (deprecated )
false
To print text in color, set this property to true. By default all text will be printed in black.
font (deprecated )
'TimesNewRoman'
Typeface used when printing HTML or JSON.
font_size (deprecated )
'12pt'
Font size used when printing HTML or JSON.

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
Opera
Internet Explorer
PDF
HTML
Images
JSON

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