PDF.js Express Plusplay_arrow

Professional PDF.js Viewing & Annotations - Try for free

How to Embed a PDF in an HTML Website

1 May 2020

author
Dustin Riley

In this article (a five-minute read), you’ll learn about two simple (and free!) approaches to displaying PDFs in the browser and how you can quickly implement them in your website.

  1. Native Browser PDF Rendering
  2. PDF.js Rendering (recommended)

Native Browser PDF Rendering

Since PDF is such a widely used format, all modern browsers have built-in PDF support. We can take advantage of this by using HTML elements to embed a PDF directly in our web page, like this:

Here’s the code:

<!DOCTYPE html>
<html>
  <head>
    <title>PDF Viewer</title>
  </head>
  <body>

    <!--
      Place the following <div> element where you want the PDF to be displayed in your website. You can change the size using the width and height attributes.
    -->
    <div>
      <object
        data='https://pdfjs-express.s3-us-west-2.amazonaws.com/docs/choosing-a-pdf-viewer.pdf'
        type="application/pdf"
        width="500"
        height="678"
      >

        <iframe
          src='https://pdfjs-express.s3-us-west-2.amazonaws.com/docs/choosing-a-pdf-viewer.pdf'
          width="500"
          height="678"
        >
        <p>This browser does not support PDF!</p>
        </iframe>
      </object>
    </div>

  </body>
</html>

I’ve used a URL for the data and src values. These point to the PDF I want to open from a URL. But I could instead open a local file by swapping out the URL for a file path (e.g. /path/to/file.pdf).

The PDF viewer’s user interface will look a bit different depending on your browser:

PDF Viewer Embedded in Website in ChromePDF Viewer Embedded in Website in Safari
Screenshot: PDF Viewer Embedded in Website in Chrome
Screenshot: PDF Viewer Embedded in Website in Safari
PDF Viewer Embedded in Website in FireFoxPDF Viewer Embedded in Website in Edge
Screenshot: PDF Viewer Embedded in Website in FireFox
Screenshot: PDF Viewer Embedded in Website in Edge

This approach will work in all modern desktop and mobile versions of Chrome, Safari, Firefox, and Edge. (It will not work in Internet Explorer.) If you need to support Internet Explorer or customize the user interface, you should consider the next approach -- PDF.js rendering.

Embed PDF in HTML With Free PDF.js Express Viewer

PDF.js Express Viewer is a free PDF.js viewer that wraps a modern React-based UI around the open-source PDF.js rendering engine. PDF.js was originally developed by Mozilla and is maintained by an open-source community. PDF.js Express Viewer allows you to render PDFs inside a web page by using JavaScript instead of the browser’s built-in PDF support.

The benefits of PDF.js Express Viewer compared to native browser rendering are:

  • Internet Explorer support (in addition to all modern browsers)
  • Consistent user interface and user experience across browsers
  • A more customizable user interface (for example, removing the download button)

PDF.js Express Viewer HTML Example

Here is what we will make after following this tutorial:

Adding PDF.js Express Viewer to your website is an easy 3 step process. Here we will be doing a manual integration, however, we have guides for integrating PDF.js Express Viewer with many frameworks, including React, Angular, Vue, Cordova, and much more. You can find a full list of framework guides here

Step 1 - Download PDF.js Express Viewer

You can click here to download PDF.js Express Viewer.

Note that to use the PDF.js Express Viewer you will need a free license key. Please get your free Viewer key here if you do not have one.

Step 2 - Integrate PDF.js Express into your application

  1. Move the extracted PDF.js Express Viewer folder into your project directory.
  1. Once you have the files, create a new html webpage in the same project directory. Call it index.html and paste this inside:

    <!DOCTYPE html>
    <html>
    <head>
      <title>PDF.js Express Viewer</title>
    </head>
    <!-- Import PDF.js Express Viewer as a script tag from the lib folder using a relative path -->
    <script src='/lib/webviewer.min.js'></script>
    
    <body>
      <div id='viewer' style={{"width":"1024px","height":"600px","margin":"0 auto"}}></div>
    </body>
    </html>
    

To import PDF.js Express Viewer as a CommonJS module, please refer to this guide to integrate with NPM

Once you have done this an example project directory might look something like this:

root folder
├── images
│    └── ...
├── scripts
│    └── ...
├── styles
│    └── ...
├── index.html
├── lib
│   ├── ui
│   │   ├── ...
│   ├── core
│   │   ├── ...
│   └── webviewer.min.js
└── ...

In this sample directory you can add the folders: images, scripts, and styles to include any extra resources you would like to have on your website. However for this example project it is only necessary to have the extracted lib folder and the index.html file we just created in the above step.

  1. To instantiate PDF.js Express Web Viewer, add this script in body after the viewer div declaration:
<script>
  WebViewer({
    path: '/lib', // path to the PDF.js Express'lib' folder on your server
    licenseKey: 'Insert free license key here',
    initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/webviewer-demo.pdf',
    // initialDoc: '/path/to/my/file.pdf',  // You can also use documents on your server
  }, document.getElementById('viewer'))
  .then(instance => {
    // now you can access APIs through the WebViewer instance
    const { Core, UI } = instance;

    // adding an event listener for when a document is loaded
    Core.documentViewer.addEventListener('documentLoaded', () => {
      console.log('document loaded');
    });

    // adding an event listener for when the page number has changed
    Core.documentViewer.addEventListener('pageNumberUpdated', (pageNumber) => {
      console.log(`Page number is: ${pageNumber}`);
    });
  });
</script>

The easiest way to run this project would be with http-server. To do so, make sure you have Node.js installed.

Next open your terminal and install http-server with the following command:

npm install http-server -g

Once installed navigate to the root of your website's directory in the terminal and run the following command:

http-server

After running that command go to your browser and type localhost:8080. You should then see the following:

manual-integration

Step 3 - Use PDF.js Express Viewer APIs to customize the viewer

To use more PDF.js Express APIs, you can add the API calls in the callback of the PDF.js Express constructor. For example, to change the theme of PDF.js Express to dark, you can add:

.then((instance) => {
    const { documentViewer, annotationManager } = instance.Core;
    // call methods from instance, documentViewer and annotationManager as needed
    instance.UI.setTheme('dark');
    // ...
  });

Refresh your application page (http://localhost:3000/) and you should see the theme has changed:

Dark theme

For resources on how to use more of our PDF.js Express API, check out the PDF.js Express guides and API.

Conclusion

We hope this was helpful! You can also have a look at PDF.js Express Plus, which extends the functionality of PDF.js Express Viewer with PDF annotation, form filling, and signing inside your web app.