How to Print PDFs Using PDF.js

In a previous tutorial, you saw how to render and embed a PDF viewer in the browser with PDF.js. In this post, you’ll look at how to print PDFs using PDF.js.

If you read the aforementioned blog post, you’ll see that embedding a PDF.js viewer example provides a fully functional toolbar, and you can use the print button to print the PDF.

In this post, you’ll add a print button to your custom toolbar using the pdfjs-display-example.

Adding a Print Button to the PDF.js Toolbar

The source code for adding a print button is the same code used in the How to Build a JavaScript PDF Viewer with PDF.js blog.

1. To get started, clone the project from GitHub and change your directory to the pdfjs-display-example folder:

git clone https://github.com/PSPDFKit-labs/pdfjs-web-example-javascript.git

cd pdfjs-display-example

2. Add a print button to the toolbar using the print icon from Font Awesome:

<li class="navigation__item">
	<button class="print-button">
		<i class="fa-solid fa-print"></i>
	</button>
</li>

Add this list item inside the ul element with the navigation class.

3. Open the index.js file and attach a click event listener to the button:

const printButton = document.querySelector('.print-button');

// Print PDF.
printButton.addEventListener('click', () => {
	window.print();
});

Here, access the button’s class with querySelector(), and add an event listener to it. When the button is clicked, the window.print() method will be called.

4. Now, when you click the print button, the PDF will be printed. To disable printing the toolbar, use the @media print CSS rule:

/* Hide Print button */
@media print {
	.navigation {
		display: none;
	}
}

There are many advantages of using window.print():

• The PDF is generated directly from HTML, CSS, and JavaScript in the browser.

• There’s no dependency on any tools.

• It’s faster.

• It supports the latest CSS properties.

There’s also a limitation of using this method:

• You can’t store files on the server side.

Using Print.js

An alternative to window.print() is using Print.js, which is a library specifically created for printing PDFs. To use this library, download the latest version from the GitHub releases page and add it to your project.

Download using npm, or use a CDN. This tutorial uses the CDN option.

1. Add the CDN links to the index.html file. Place the print.css link before the closing </head> tag:

<link
	rel="stylesheet"
	href="https://cdnjs.cloudflare.com/ajax/libs/print-js/1.6.0/print.css"
	integrity="sha512-tKGnmy6w6vpt8VyMNuWbQtk6D6vwU8VCxUi0kEMXmtgwW+6F70iONzukEUC3gvb+KTJTLzDKAGGWc1R7rmIgxQ=="
	crossorigin="anonymous"
	referrerpolicy="no-referrer"
/>

2. Include the print.js script before the closing </body> tag:

<script
	src="https://cdnjs.cloudflare.com/ajax/libs/print-js/1.6.0/print.js"
	integrity="sha512-/fgTphwXa3lqAhN+I8gG8AvuaTErm1YxpUjbdCvwfTMyv8UZnFyId7ft5736xQ6CyQN4Nzr21lBuWWA9RTCXCw=="
	crossorigin="anonymous"
	referrerpolicy="no-referrer"
></script>

You already created a print button in the previous section. Use this same button to print the PDF.

3. Change the print handler function to use the printJS() method:

printButton.addEventListener('click', () => {
	printJS('canvas', 'html');
});

Print.js supports printing HTML content. To print the PDF, pass the DOM selector of the element — in this case, it’s canvas — to the printJS() method. The second argument is the type of the content. In this case, it’s html.

You can print any element as long as it has a unique selector. Now, when you click the print button, the PDF will be printed in a way similar to the window.print() method.

Conclusion

In this post, you saw how to print PDFs using window.print and Print.js. If you’re looking to add more robust PDF capabilities, PSPDFKit offers a commercial JavaScript PDF library that can easily be integrated into your web application. It comes with 30+ features that let you view, annotate, edit, and sign documents directly in your browser. Out of the box, it has a polished and flexible UI that you can extend or simplify based on your unique use case.

You can also use one of our many web framework deployment options like React.js, Angular, and Vue.js. To see a list of all web frameworks, start your free trial. Or, launch our demo to see our viewer in action.