Pre-Purchase Insights: Everything you need to know before you buy.

How to Embed a PDF Viewer in a React App

By Andrey Safonov | 2023 Jun 05

Sanity Image
Read time

3 min

In this blog, we will cover how to embed a PDF viewer into a React app as a component. We’ll be using the ApryseWebViewer in this tutorial, although there are other PDF viewers available. For example, there are a number of viewers out there primarily built on top of PDF.js. This is an open-source PDF rendering engine built by Mozilla and maintained by the development community.

A lot of projects like react-pdf, react-pdf/renderer, @phuocng/react-pdf-viewer, and react-file-viewer are based on PDF.js, although it has its shortcomings. In addition, all the above PDF viewers are maintained by a single dev, which is a tremendous effort.

Here are some top issues with PDF.js:

  • It was meant as a lightweight preview for text-based PDFs.
  • It only supports free text annotation, 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 which has a line break in it, it will return react pdf viewer as 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 good for what it is meant for, and that is for a quick preview in-browser. You can watch a video where I compare a number of open-source projects built on PDF.js. In some ways, it is even better than PDFium, but that is a story for another day.

Now why would you pick ApryseWebViewer to embed in a React App?

  • We do not use PDF.js or PDFium, but instead uses our PDF rendering engine, written from scratch and maintained by a team of 90 devs(including myself).
  • This allows it to handle documents of various file sizes and page lengths.
  • 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 vertical like legal, you won’t get burned.
  • We offer digital signature capabilities, a common workflow for PDFs.
  • And we can also handle file formats like DOCX, XLSX, PPTX, videos, images, and many more.

Okay, now let’s see how to get started with embedding ApryseWebViewer in your React App. You can also just clone a ready-to-go sample from our GitHub

Install React PDF Viewer

Copied to clipboard

From the terminal in your React app location, run the following command:

npm i @pdftron/webviewer

This pulls down all the necessary components. Next, you want to copy static resources necessary for WebViewer to run into your public directory. The files are located innode_modules/@pdftron/webviewer/public and must be moved into your public folder.

Inside of a GitHub project, we automate the copying of static resources by executing copy-webviewer-files.js.

Import PDF Viewer as a Component

Copied to clipboard

Import WebViewer into your component.

import WebViewer from '@pdftron/webviewer'; 

Create a reference where WebViewer will be placed or mounted.

import {useRef} from 'react'; 
import WebViewer from '@pdftron/webviewer'; 

const MyComponent = () => { 
  const viewer = useRef(null); 

  return ( 
    <div className="MyComponent"> 
      <div className="header">React sample</div> 
      <div className="webviewer" ref={viewer} style={{height: "100vh"}}></div> 

Inside of useEffect hook or componentDidMount lifecycle method, initialize WebViewer. Ensure that the path property in the constructor points to where you copied static assets node_modules/@pdftron/webviewer/public in the React public folder.

import {useEffect, useRef} from 'react'; 
import WebViewer from '@pdftron/webviewer' 

const MyComponent = () => { 
  const viewer = useRef(null); 
  useEffect(() => { 
        path: '/webviewer/lib', 
        licenseKey: 'YOUR_LICENSE_KEY', 
        initialDoc: '', 
    ).then((instance) => { 
        const { documentViewer } = instance.Core; 
        // you can now call WebViewer APIs here... 
  }, []); 

  return ( 
    <div className="MyComponent"> 
      <div className="header">React sample</div> 
      <div className="webviewer" ref={viewer} style={{height: "100vh"}}></div> 

Run PDF Viewer in your React App

Copied to clipboard

Run the app by running in your terminal:

npm start

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. You can always grab a ready-to-go sample on our GitHub, or chat with us on Discord if you get stuck.

Start Your Free Trial

Sanity Image

Andrey Safonov

Director of Product

LinkedIn link

Share this post