A small JavaScript package that makes it easier to print from the web.
To install using npm:
Import the library into your project when performing a npm or yarn installation:
Using Print.js:
There are four different print document types: "pdf," "html," "image," and "Json."
The default type is 'pdf'.
The simplest way to use it is to call printJS() and simply supply the URL of a PDF file.
The concept is the same for picture files, but you must give a second argument: printJS('image', 'images/PrintJS.jpg').
In a same manner, type printJS('myElementId', 'html') after passing in the element id to print HTML elements.
Pass the data, type, and data characteristics that you want to publish when printing JSON data:
printJS("printable: myData, type: "json", properties: "prop1", "prop3"]);
PDF Printing
Print.js was primarily created to enable us to print PDF files from within our apps without having to navigate away from the user interface or use embeds.
For special circumstances where users only need to print the PDF files and don't need to open or download them.
When users ask to print server-generated reports, for instance, that is one situation when this is helpful. As PDF files, these reports are returned. Prior to printing, there is no need to open these files.
Within our apps, Print.js provides a speedy method for printing these files.
Example:
Include a print button for any PDF files you host on your server:
<button type="button" onclick="printJS('docs/printjs.pdf')">
Print PDF
</button>
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>
The library supports base64 PDF printing:
<button type="button" onclick="printJS({printable: base64, type: 'pdf', base64: true})"> Print PDF with Message</button>
HTML Printing
When loading huge files, you can display the following notice to the user:
The library enables printing base64-encoded PDFs:
Printing HTML
It can be challenging when we only want to print a portion of an HTML page.
We can easily pass the id of the element we wish to print using Print.js.
As long as the element has a distinct id, it can belong to any tag.
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>
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>
Image Printing
By giving the image URL, Print.js may be used to rapidly print any image on your page.
Using a low-resolution version of the photographs can be helpful when you have numerous images on the screen.
You can instruct Print.js to use the high-resolution URL when users attempt to print the chosen image.
Example:
Add images to your page at the exact resolution you need to see them
<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')
You can furthermore add a header to the printed image.
printJS({printable: 'images/print-01-highres.jpg', type: 'image', header: 'My cool image header'})
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;'
}
JSON Printing
A quick and easy method for printing arrays of JavaScript objects or dynamic data.
Example:
The following data set is contained in our JavaScript code. Probably an AJAX call to a server API would result like this:
someJSONdata = [
{
name: 'John Doe',
email:
phone: '111-111-1111'
},
{
name: 'Barry Allen',
email:
phone: '222-222-2222'
},
{
name: 'Cool Dude',
email:
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>
Passing some custom CSS to the data grid will style it as follows:
<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>
The table header text can be changed by supplying an object array:
<button type="button" onclick="printJS({
printable: someJSONdata,
properties: [
{field: 'name', displayName: 'Full Name'},
{field: 'email', displayName: 'E-mail'},
{field: 'phone', displayName: 'Phone'}
],
type: 'json'
})">
Print with custom table header text
</button>
A raw HTML header can be sent to JSON, HTML, and image print:
<button type="button" onclick="printJS({
printable: someJSONdata,
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>