Print.js

https://printjs.crabbly.com
Admin
Print.js is a lightweight JavaScript library designed to help web applications print various...
Tokens:2,625
Snippets:34
Trust Score:7.6
Update:4 months ago
Show doc for...
Tokens:
Raw
### Install Print.js using npm

Source: https://printjs.crabbly.com/

Install the Print.js library into your project using npm. This command adds the library as a project dependency.

```bash
npm install print-js --save
```

--------------------------------

### Install Print.js using yarn

Source: https://printjs.crabbly.com/

Install the Print.js library into your project using yarn. This command adds the library as a project dependency.

```bash
yarn add print-js
```

--------------------------------

### Import Print.js in JavaScript

Source: https://printjs.crabbly.com/

Import the Print.js library into your JavaScript project after installing it via npm or yarn. This makes the library's functionality available.

```javascript
import print from 'print-js'
```

--------------------------------

### Print PDF File

Source: https://printjs.crabbly.com/

Use this snippet to print a PDF file directly from your server. The PDF must be served from the same domain as your app due to Same Origin Policy.

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

--------------------------------

### Print PDF with Loading Message

Source: https://printjs.crabbly.com/

Print a large PDF file and display a modal message to the user while it's loading. This is useful for large files to provide user feedback.

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

--------------------------------

### Print Multiple Images with Styling

Source: https://printjs.crabbly.com/

Print an array of images, applying custom styles to each. This allows for consistent formatting and layout when printing multiple images.

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

--------------------------------

### Include Print.js via CDN

Source: https://printjs.crabbly.com/

Include the Print.js library and its CSS file in your HTML using CDN links. This is a quick way to add the library without a package manager.

```html
<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://printjs-4de6.kxcdn.com/print.min.css">
```

--------------------------------

### Include Print.js in HTML

Source: https://printjs.crabbly.com/

Include the Print.js library script in your HTML file to make it available for use. This is a prerequisite for using Print.js features.

```html
<script src="print.js"></script>
```

--------------------------------

### Print JSON Data with Basic Properties

Source: https://printjs.crabbly.com/

Pass JSON data to Print.js to print specific properties in a table format. Ensure the data and property names are correctly defined.

```javascript
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'
    }
 ]
```

```html
<button type="button" onclick="printJS({printable: someJSONdata, properties: ['name', 'email', 'phone'], type: 'json'})">
    Print JSON Data
 </button>
```

--------------------------------

### Print Image with Header

Source: https://printjs.crabbly.com/

Print an image and add a custom header to the printed output. This is useful for branding or adding context to the printed image.

```javascript
printJS({printable: 'images/print-01-highres.jpg', type: 'image', header: 'My cool image header'})
```

--------------------------------

### Print JSON Data with Custom Grid Styles

Source: https://printjs.crabbly.com/

Apply custom CSS styles to the header and body of the JSON data grid for enhanced presentation. This allows for branding or improved readability.

```html
<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>
```

--------------------------------

### Print HTML Element with Header

Source: https://printjs.crabbly.com/

Print an HTML element and include a custom header on the printed page. This allows for adding titles or context to the printed content.

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

--------------------------------

### Print Single Image

Source: https://printjs.crabbly.com/

Print a single image using its URL. For better print quality, provide the high-resolution URL of the image.

```javascript
printJS('images/print-01-highres.jpg', 'image')
```

--------------------------------

### Print JSON Data with Raw HTML Header

Source: https://printjs.crabbly.com/

Include a custom HTML header in the JSON print output by passing an HTML string to the 'header' option. Custom styles can be applied using the 'style' option.

```html
<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>
```

--------------------------------

### Include Print.css for Modal Feature

Source: https://printjs.crabbly.com/

Include the Print.css stylesheet in your HTML if you plan to use the modal feature of Print.js. This is necessary for the modal's styling.

```html
<link rel="stylesheet" type="text/css" href="print.css">
```

--------------------------------

### Print Base64 Encoded PDF

Source: https://printjs.crabbly.com/

Print a PDF directly from a base64 encoded string. This is useful when the PDF content is generated dynamically or received as a base64 string.

```html
<button type="button" onclick="printJS({printable: base64, type: 'pdf', base64: true})">
    Print PDF with Message
 </button>
```

--------------------------------

### Print HTML Element by ID

Source: https://printjs.crabbly.com/

Print a specific section of an HTML page by providing the ID of the element. The library attempts to maintain the on-screen appearance while creating a printer-friendly format.

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

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

--------------------------------

### Print JSON Data with Custom Table Header Text

Source: https://printjs.crabbly.com/

Customize the column headers in the printed JSON output by providing an array of objects with 'field' and 'displayName' properties. This improves clarity for users.

```html
<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>
```
Tokens:
Raw