A Small JavaScript Library To Help With Printing From The Web | Print.js

Print.js is a small yet powerful JavaScript library that enables you to preview and print any elements (PDF, HTML, IMAGE, DYNAMIC DATA) on a web page.

How to make use of it:


# Yarn
$ yarn add print-js

$ npm install print-js --save

Include each print.css and print.js on the webpage.

<script src="print.js"></script>
<link rel="stylesheet" href="print.css">

Print a PDF file on the webpage without opening or downloading.


Print HTML content.

printJS('SELECTOR', 'html')

Print a picture on the webpage.

printJS('img.jpg', 'image');

Print dynamic information (e.g. JSON) on the webpage.

mydata = [
       name: 'John Doe',
       email: '[email protected]',
       phone: '111-111-1111'
       name: 'Barry Allen',
       email: '[email protected]',
       phone: '222-222-2222'
       name: 'Cool Dude',
       email: '[email protected]',
       phone: '333-333-3333'

   printable: mydata, 
   properties: ['name', 'email', 'phone'], 
   type: 'json'

All default parameters.

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

fallbackPrintable: null,

// Document type.
type: 'pdf',

// Optional header to be used with HTML, Image or JSON printing. 
// It will be placed on the top of the page.
header: null,

// Max document width in pixels. 
maxWidth: 800,

// Font Family
font: 'TimesNewRoman',

// Font size
font_size: '12pt',

// Used to keep or remove padding and margin from elements that are being printed.
honorMarginPadding: true,

// Print text in color
honorColor: false,

// Used when printing JSON.
properties: null,

// grid header when printing JSON data
gridHeaderStyle: 'font-weight: bold; padding: 5px; border: 1px solid #dddddd;',

// grid rows when printing JSON data
gridStyle: 'border: 1px solid lightgray; margin-bottom: -1px;',

// Enable this option to show user feedback when retrieving or processing large PDF files.
showModal: false,

// Message displayed to users when showModal is set to true.
modalMessage: 'Retrieving Document...',

// Frame ID
frameId: 'printJS',

// Document title
documentTitle: 'Document',

// Target styles
targetStyle: ['clear', 'display', 'width', 'min-width', 'height', 'min-height', 'max-height'],
targetStyles: ['border', 'box', 'break', 'text-decoration'],

// Elements to ignore
ignoreElements: [],

// Image style
imageStyle: 'width:100%;',

// Repeat table header
repeatTableHeader: true,

// Pass one or more css files URLs
css: null,

// Pass a string with custom style
style: null,

// When set to false, the library will not process styles applied to the html being printed. Useful when using the css parameter.
scanStyles: true,

// Callback functions
onLoadingStart: null,
onLoadingEnd: null,
onPrintDialogClose: null,

JavaScript Library For Printing Any Elements On The Page, Print.js Plugin/Github

See Demo And Download

Official Website(crabbly): Click Here

This superior jQuery/javascript plugin is developed by crabbly. For extra Advanced Usages, please go to the official website.

Related Posts


How to Create a Simple Cookie Banner Consent Using Bootstrap 4

Cookie Consent Popup Javascript – Quick and simple tutorial for creating a simple Bootstrap cookie banner. If you have a website or blog with people visiting or…


Create Custom HTML Terminals With Pure JavaScript | shell.js

Custom HTML Terminals is A JavaScript library to create HTML terminals on web pages. The shell js JavaScript library offers a straightforward method to create Ubuntu, OS X,…


Bootstrap Alert, Confirm, and Flexible Dialog Boxes | Bootbox

Bootbox.js is a small JavaScript library that allows you to create programming dialogs using Bootstrap templates, without having to worry about creating, managing, or removing any required…


An Accessible Touch-enabled Slider Web Component | fg-carousel

fg-carousel Slider – A simple & modern slider web component to create versatile, accessible, touch-enabled picture carousels utilizing CSS scroll snap, Custom Element, and Intersection Observer API….


A Lightweight and Efficient Tags Input Component in Vanilla JS | tagify

tagify transforms an input field or textarea into a tags component, in an easy and customizable way, with great performance and a small code footprint, full of…


A Lightweight Library to Copy Text to Clipboard | CopyJS

CopyJS is a lightweight JavaScript library that allows you to copy plain text or HTML content to the clipboard. Must Read: Tiny Library for Copy Text In…