How to Use PDF.js in 2 Easy Steps

2020 May 2020

author
Johan Johansson

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

Here’s an example of the PDF.js viewer we’re going to build:

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

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
│   └── ...
└── LICENSE

After extracting the .zip contents, our website folder could look something like this:

├── index.html
├── subpage.html
├── assets/
│   ├── pdf/
|       ├── my-pdf-file.pdf
|       ├── my-other-pdf-file.pdf
|       ├── ...
├── build/                            - PDF.js files
│   ├── pdf.js
│   ├── ...
├── web/                              - PDF.js files
│   ├── viewer.css
│   ├── viewer.html
│   ├── ...
└── LICENSE                           - PDF.js license

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:

<!DOCTYPE html>
<html>
  <head>
    <title>Hello world!</title>
  </head>
  <body style="font-family: Arial, Helvetica, sans-serif;">

    <div style="width:760px;">
      <h2>About Us</h2>
      <p>We help software developers do more with PDFs. PDF.js Express gives a flexible and modern UI to your PDF.js viewer while also adding out-of-the-box features like annotations, form filling and signatures.</p>

        <!--
          Place the following <div> element where you want the PDF to be displayed in your website. You can adjust the size using the width and height attributes.
        -->
        <div>
            <iframe id="pdf-js-viewer" src="/web/viewer.html?file=%2assets%2pdf%2Fmy-pdf-file.pdf" title="webviewer" frameborder="0" width="500" height="600"></iframe>
        </div>

    </div>

  </body>
</html>

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:

Open Full Screen PDF.js Viewer

Here’s the code:

<a href="/web/viewer.html?file=%2Fmy-pdf-file.pdf">Open Full Screen PDF.js Viewer</a>

Just change the file query string parameter to open whatever you PDF you wish to open.

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.

PDF.js Express Demo

Check out the demo and let us know what you think!