Creating a PDF Viewer: PDF.js vs Apryse WebViewer

By Garry Klooesterman | 2024 Nov 27

4 min

Introduction

Copied to clipboard

PDFs are one of the most popular file formats on the web today. It’s estimated that trillions of PDFs are created each year. As an easy and reliable way to share documents, regardless of the software, hardware, or operating systems used to view them, PDFs can be opened anywhere. You can even open PDFs on smart TVs and watches, and who knows what’s next.

For this blog though, we’ll focus on viewing PDFs in a web browser. Embedding a PDF in a web browser is easy and we’ll look at two ways to set it up; using PDF.js and Apryse WebViewer.

PDF.js

Copied to clipboard

As an open-source JavaScript library, PDF.js was originally created as a simple JavaScript PDF viewer. It has since been updated with several popular features, such as form filling and digital signature display. PDF.js allows you to easily add a PDF viewer to projects and even customize basic UI elements through CSS and HTML, at no cost.

Embed a PDF

Adding PDF.js to a project to create a simple PDF viewer is easy. You can embed the PDF in a container, such as an iframe, canvas, or object. Each has its pros and cons, but to keep it simple, we’ll use an iframe.

1. Download the PDF.js package from GitHub and extract the .zip file to your website folder.

2. Put the following code in the body where you want to embed the PDF in the iframe.

<iframe id="pdf-viewer" src="/web/viewer.html?file=%2assets%2pdf%2Fmy-pdf-file.pdf" title="webviewer" frameborder="0" width="800" height="600"></iframe>

3. Specify the source of the PDF you want to view using the src attribute and set other attributes, such as, id, title, width, and height.

4. Load the webpage to see the PDF embedded in an iframe.

And voila! You’ve just embedded a PDF on a webpage.

Apryse WebViewer

Copied to clipboard

PDF.js may be cost-effective for basic viewing of small and simple PDFs, but users may experience issues with rendering, performance, and reliability.

For more details on PDF.js and if it’s right for you, see Guide to Evaluating PDF.js.

When more complex features are needed, PDF.js falls short and developers look to more robust options, such as Apryse WebViewer.

WebViewer is a JavaScript Document SDK compatible with all frameworks and browsers. It provides features beyond basic PDF viewing, including creating, searching, annotating, editing, and more, directly in the browser. WebViewer is just as simple and straightforward to set up as PDF.js, and its UI allows extensive customization, providing for a more tailored user experience.

Embed a PDF

Creating a PDF viewer using WebViewer is simple and straightforward. You can embed a PDF using a container, such as an iframe or a web component. Web components offer benefits, such as encapsulation, reusability, and more that iframes don't. However, for comparison, we’ll use an iframe.

1. Download WebViewer and extract the .zip file to your project directory.

2. Create an index.html webpage and add this code:

<!DOCTYPE html>
<html>
<head>
  <title>Basic WebViewer</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- Import WebViewer as a script tag -->
<script src='WebViewer/lib/webviewer.min.js'></script>
</head>
<body>
  <div id='pdf-viewer' style='width: 1024px; height: 600px; margin: 0 auto;'></div>
</body>
</html>

3. Add the following code to the body of your webpage where you want the PDF to be embedded.

<script>
  WebViewer({
    path: 'WebViewer/lib', // path to the Apryse 'lib' folder on your server
    licenseKey: 'YOUR_LICENSE_KEY', // sign up to get a key at https://dev.apryse.com
    initialDoc: '/example path/example-file.pdf',
    // initialDoc: '/path/to/my/file.pdf',  // You can also use documents on your server
  }, document.getElementById('pdf-viewer'))
  .then(instance => {
    const { documentViewer, annotationManager } = instance.Core;

    // call methods from instance, documentViewer and annotationManager as needed

    // you can also access major namespaces from the instance as follows:
    // const Tools = instance.Core.Tools;
    // const Annotations = instance.Core.Annotations;

    documentViewer.addEventListener('documentLoaded', () => {
      // call methods relating to the loaded document
    });
  });
</script>

4. Set various attributes of the div tag for the viewer, such as, id, width, and height. Specify the source of the PDF you want to view using initialDoc in the script tag.

5. Start the server.

If you have a local server set up already, open a terminal in your project folder and execute:

http-server -a localhost

If you don’t already have a local server, follow these two steps:

a. Open a terminal in your project folder and execute:

npm install -g http-server

b. Start the server by executing:

http-server -a localhost

6. Open the index.html webpage on your browser or refresh the page if you already have it open.

Can you believe it was that simple and straighforward? You now have a PDF viewer set up with a PDF embedded in WebViewer.

Conclusion

Copied to clipboard

In this blog, we explored two ways of setting up a PDF viewer in a web browser. With only a few simple steps, setting up a PDF viewer using WebViewer is just as straightforward as with PDF.js. If you need a robust, customizable Document SDK compatible with your environment that offers PDF handling features such as viewing, creating, searching, annotating, editing, and more, then WebViewer is right for you. The extra steps on set up are worthwhile for the features and benefits of using Apryse WebViewer.

Creating a PDF Viewer: PDF.js vs Apryse WebViewer

Introduction

PDF.js

Embed a PDF

Apryse WebViewer

Embed a PDF

Conclusion

Resources

Related Articles

View all blogs

How to Solve Six Common Problems when Getting Started with Apryse WebViewer

PDF.js: Exploring Pros, Cons, and Alternatives

Top 5 things you need to know about updating your UI to WCAG-compliance