Blog Post

How to Print PDFs Using PDF.js

Illustration: 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

cd pdfjs-display-example
  1. 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>

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

  1. 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', () => {

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.

  1. 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:

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


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

  1. 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.


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.

Related Products
Share Post
Free 60-Day Trial Try PSPDFKit in your app today.
Free Trial

Related Articles

Explore more
TUTORIALS  |  Web • Angular • How To

How to Use jsPDF and Angular to Generate PDFs

DESIGN  |  Baseline UI • Web

Part I — Design Systems: Building Blocks for Seamless User Experiences

PRODUCTS  |  Web • Releases • Components

PSPDFKit for Web 2024.3 Features New Stamps and Signing UI, Export to Office Formats, and More