How to Embed a PDF Viewer in a JavaScript App

By Andrey Safonov | 2023 Jun 06

3 min

Tags

pdf viewer

pdf.js

JavaScript PDF Viewer

In this blog, we will cover how to embed a PDF viewer into a JavaScript app. Now before we dive in, let’s take a look at the options we have. Naturally, we have the Apryse WebViewer, although you may consider using one of the PDF viewers out there built using Mozilla’s PDF.js. This is an open-source PDF rendering engine built by Mozilla and maintained by the development community. PDF.js comes with PDF rendering and an out-of-the-box UI. It is great for rendering 2-page PDF documents and doing very basic annotations like adding text to the page or drawing on top of the page. However, there are some issues that mean it may not work for you.

Here are some issues with PDF.js PDF viewing:

It was meant as a lightweight preview for text-based PDFs.
It only supports free text annotation, a freehand draw tool, and that’s about it when it comes to annotations.
Its search does not do well with line breaks, meaning when you search for a word that has a line break in it, it will return with no results found.
It does not offer PDF editing capabilities like page manipulation, inserting, removing, and re-arranging pages.
And it just views PDFs, as it says in the name.

Nothing against PDF.js, it is a great open-source project. You can watch a video where I compare a number of open-source projects built on PDF.js.

Now why would you pick Apryse WebViewer?

You need a more robust rendering engine that is built and maintained by a team of 90 developers as their full-time job.
This allows it to handle documents of various file sizes and page lengths.
You need to open DOCX, XLSX, PPTX, images, videos, and other formats.
We can provide you with support around the clock. For example, to get started, come chat with us on Discord.
We offer 30+ annotation types and allow your users to collaborate and reply to each other in real time.
We edit PDFs, whether you are manipulating pages or editing text inside a PDF.
Our search works across line breaks, meaning if you are in a highly-compliant verticals like legal, you won’t get burned.
We offer digital signature capabilities, a common workflow for PDFs.

Okay, now let’s get started with embedding ApryseWebViewer in your JavaScript App.

Create a Local Server

Copied to clipboard

Let’s create a local http server that will serve the contents of the folder and make it accessible in our browser. You should also have a Node environmenthttps://nodejs.org/en setup and configured. You can use npm, which comes out of the box with Node installation, or yarn https://yarnpkg.com/, a popular package manager alternative after that. With that setup out of the way, create a folder and run the following in a terminal in the root of the folder you just created:

npm install -g http-server

Download Apryse PDF Viewer

Copied to clipboard

You can download WebViewer.zip https://www.pdftron.com/downloads/WebViewer.zip, complete with samples and all necessary dependencies. Go ahead and extract it to the folder you just created.

Create an HTML page with PDF Viewer embedded

Copied to clipboard

In the root of the folder you just created, go ahead and create a new `index.html` with the following contents:

<!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" /> 
</head> 

<!-- Import WebViewer as a script tag --> 
<script src='WebViewer/lib/webviewer.min.js'></script> 

<body> 
  <div id='viewer' style='width: 1024px; height: 600px; margin: 0 auto;'></div> 
<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: '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 => { 
    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> 
</body> 
</html>

Run PDF Viewer in your JavaScript App

Copied to clipboard

http-server -a localhost

Open http://localhost:8080/index.html on your browser, and you should see WebViewer load up.

Next Steps

Copied to clipboard

Now that you have PDF Viewer up and running check out our other guides on how to load files or how to customize the WebViewer. Also, you can chat with us on Discord if you get stuck. If you have any more questions or want to learn more about Apryse SDK functionality, feel free to contact us.