Logan Bittner
Published May 08, 2020
Updated February 18, 2026
3 min
How to Use PDF.js in 2 Easy Steps
Logan Bittner
In this article (a three-minute read), you’ll learn how to quickly embed a PDF in a web page using PDF.js, a popular open-source PDF viewer.
1. Download and Extract the PDF.js Package
2. Add the PDF viewer to your web page
We will also use it as a full screen PDF viewer where we can pass in a PDF filename via URL query string. Try the full screen viewer now:
Open Full Screen PDF.js Viewer
Step 1 - Download and Extract the PDF.js Package
Let’s head over to GitHub to download the latest stable release and then extract the contents inside our website folder.
Here are the contents of the .zip:
├── build/
│ ├── pdf.js
│ └── ...
├── web/
│ ├── viewer.css
│ ├── viewer.html
│ └── ...
└── LICENSEAfter extracting the .zip contents, our website folder could look something like this:
Note: Due to browser security restrictions, PDF.js cannot open local PDFs using a file:// URL. You will need to start a local web server or upload the files to your web server.
Step 2 - Embed the PDF Viewer in Website
Our last step will be to embed the viewer in our web page by using an <iframe>. We will use a query string to tell the PDF viewer which PDF file to open. Like this:
You’re done!
If you’d like to load PDF files from a different domain name, you will need to ensure the server hosting the PDFs has been set up for CORS.
Full Screen PDF Viewer
In addition to embedding the viewer in a page, we can also open it in a full screen:
Here’s the code:
Just change the file query string parameter to open whatever you PDF you wish to open.
Customizing the PDF.js Toolbar
We can also reorganize the toolbar by moving elements around, removing buttons, and changing the icons.
Let’s open public/lib/web/viewer.html and add the following to the <head> section:
Next, we’ll create customToolbar.js inside the public/lib/web folder and add the following code:
The PDF.js primary toolbar is broken down into 3 regions:
The secondary toolbar is accessed via the chevron icon in the right region:
We can move elements from the secondary toolbar into the left, middle, or right regions of the primary toolbar with the addElemFromSecondaryToPrimary function in customToolbar.js. For example, uncommenting this line will move the counter-clockwise rotation tool to the left region of the primary toolbar:
addElemFromSecondaryToPrimary('pageRotateCcw', 'toolbarViewerLeft')If you wanted to move pageRotateCcw to the middle region instead, you’d replace toolbarViewerLeft with toolbarViewerMiddle, or toolbarViewerRight for the right region. To move a different tool, replace the pageRotateCcw ID with the element ID you want to move. (See below for a full list of element IDs.)
We can also hide elements like this:
removeElement('print')
removeElement('download')
To hide different elements, replace print or download with the element ID.
NOTE: Hiding the download and print buttons is not a bulletproof way to protect our PDF, because it’s still possible to look at the source code to find the file. It just makes it a bit harder.
We can also customize the icons for various tools by swapping out the `SVG` file, like this:
changeIcon('previous', 'icons/baseline-navigate_before-24px.svg')In the above example, previous is the element ID, while icons/baseline-navigate_before-24px.svg is the path to the tool icon.
And that’s it!
Next Steps
Now that you’ve got your PDF.js viewer up and running, consider the following tutorials:
Conclusion
As you can see, building a basic PDF viewer with PDF.js is pretty straightforward. If you require additional capabilities, like PDF annotation, filling forms, or e-signatures, consider PDF.js Express, which provides a PDF.js-based viewer with out-of-the-box annotation, PDF form fill, and signing. For a broader comparison, see our guide on PDF.js alternatives.
Check out the demo and let us know what you think!
