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.
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 Chrome | PDF Viewer Embedded in Website in Safari |
|---|---|
 |  |
| PDF Viewer Embedded in Website in FireFox | 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, 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
- Move the extracted
PDF.js Express Viewerfolder into your project directory.
Once you have the files, create a new
htmlwebpage in the same project directory. Call itindex.htmland 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.
- To instantiate PDF.js Express Web Viewer, add this script in
bodyafter theviewerdiv 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 -gOnce installed navigate to the root of your website's directory in the terminal and run the following command:
http-serverAfter running that command go to your browser and type localhost:8080. You should then see the following:
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:
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.
