Print.js - Javascript library for HTML elements, PDF and image files printing.

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

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.

PDF files must be served from the same domain as your app is hosted under. Print.js uses iframe to load files before printing them, therefore, it is limited by the Same Origin Policy . This helps preventing Cross-site scripting (XSS) attacks.

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

Result:

Print Large PDF ( 5mb file ) Print Extra Large PDF ( 16mb file ) <button type="button" onclick="printJS({printable: base64, type: 'pdf', base64: true})"> Print PDF with Message </button>

Result:

Print base64 PDF

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.

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

Result:

Print Form with Header

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:

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;' <button type="button" onclick="printJS({printable: someJSONdata, properties: ['name', 'email', 'phone'], type: 'json'})"> Print JSON Data </button>

Result:

Print JSON Data <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:

Print Styled JSON Data properties: [ { field: 'name', displayName: 'Full Name'}, { field: 'email', displayName: 'E-mail'}, { field: 'phone', displayName: 'Phone'} type: 'json' Print with custom table header text </button>

Result:

Print with custom table header text type: 'json', properties: ['name', 'email', 'phone'], header: '<h3 class="custom-h3">My custom header</h3>', style: '.custom-h3 { color: red; }' Print header raw html </button>

Result:

Print JSON with raw HTML header

Download and Install

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

Download v1.5.0

To install using npm:

npm install print-js --save

To install using yarn:

yarn add print-js

When installing via npm or yarn, import the library into your project:

import print from '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

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

Document source: pdf or image url, html element id or json data object.

'pdf'

Printable type. Availble print options are: pdf, html, image, json and raw-html.

header

Optional header to be used with HTML, Image or JSON printing. It will be placed on the top of the page. This property will accept text or raw HTML.

headerStyle

'font-weight: 300;'

Optional header style to be applied to the header text.

maxWidth

Max document width in pixels. Change this as you need. Used when printing HTML, Images or JSON.

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

This allow us to pass a string with custom style that should be applied to the html being printed.

scanStyles

When set to false, the library will not process styles applied to the html being printed. Useful when using the

css

parameter.

targetStyle

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

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.

properties

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

Used when printing JSON data. When set to


    false

, the data table header will show in first page only.

showModal

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

Function to be executed when PDF is being loaded

onLoadingEnd

Function to be executed after PDF has loaded

documentTitle

'Document'

When printing html, image or json, this will be shown as the document title.

fallbackPrintable

When printing pdf, if the browser is not compatible (check browser compatibility table), the library will open the pdf in a new tab. This allow you to pass a different pdf document to be opened instead of the original passed in `printable`. This may be useful if you inject javascript in your alternate pdf file.

onPdfOpen

When printing pdf, if the browser is not compatible (check browser compatibility table), the library will open the pdf in a new tab. A callback function can be passed here, which will be executed when this happens. It may be useful in some situations where you want to handle your print flow, update user interface, etc.

onPrintDialogClose

Callback function executed once the browser print dialog is closed.

onError

error => throw error

Callback function to be executed when an error occurs.

base64

false

Used when printing PDF documents passed as base64 data.

honorMarginPadding (deprecated