How to Embed a PDF Viewer in a React App
By Andrey Safonov | 2023 Jun 05
3 min
Tags
pdf viewer
react
webviewer
react pdf viewer
In this blog, we will cover how to embed a PDF viewer into a React app as a component. We’ll be using the Apryse WebViewer 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 Apryse WebViewer 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 Apryse WebViewer in your React App. You can also just clone a ready-to-go sample from our GitHub https://github.com/PDFTron/webviewer-react-sample.
Learn how to build a customizable PDF viewer in React.
Install React PDF Viewer
From the terminal in your React app location, run the following command:
npm i @pdftron/webviewerThis 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
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>
</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(() => {
WebViewer(
{
path: '/webviewer/lib',
licenseKey: 'YOUR_LICENSE_KEY',
initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf',
},
viewer.current,
).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>
</div>
);
}; Run PDF Viewer in your React App
Run the app by running in your terminal:
npm startNext Steps
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 chat with us on Discord if you get stuck.
Start Your Free Trial
Tags
pdf viewer
react
webviewer
react pdf viewer
Andrey Safonov
Director of Product
Share this post
