How To Build a Customizable React PDF Viewer?

By Andrey Safonov | 2023 Jun 16

5 min

Why is Apryse SDK such a powerful tool?

Copied to clipboard

Apryse’s proprietary engine comes with a lot of functionality, straight out-of-the-box. In addition to being great at rendering PDFs, it also supports:

Full annotation, including commenting and replying
Page manipulation to insert, delete, re-arrange, and merge pages
Redaction, allowing you to remove sensitive information from documents
Document search with ambient highlighting, meaning that it returns a full sentence where the hit was found
Handling encrypted and password-protected documents
Streaming documents from storage
DOCX, XLSX, PPTX viewing and editing
Image, video, 3D and other supported formats

Almost all functionality is performed directly within the browser (using WASM), making it extremely fast and keeping your documents secure rather than them being transferred over the internet and processed on a remote server.

Installing the Apryse Rendering Engine

Copied to clipboard

Probably the easiest way to get the Apryse rendering engine is to run:

npm i @pdftron/webviewer

Once the package has been installed, copy the `public/core` contents located in your `node_modules/@pdftron/webviewer/public/core` to the `/public/webviewer` folder in your React app.

Now, you can reference the necessary scripts for rendering between the <body> tags of `public/index.html`, similarly to how we did it in our GitHub repository for this project: https://github.com/PDFTron/webviewer-custom-ui/blob/master/public/index.html#L29


<script src="%PUBLIC_URL%/webviewer/core/webviewer-core.min.js"></script>

<script src="%PUBLIC_URL%/webviewer/core/pdf/PDFNet.js"></script>

Now, you should be able to reference it wherever you are building the PDF Viewer.

Creating a React PDF Viewer Component

You can now create a reusable PDF Viewer component in your React app. However, in our example, we will keep things simple and just add the code directly to `App.js`.

Let’s add where the PDF will be rendered. To begin, let’s add a couple of references that we will need inside the component or App.js:


const App = () => {
const viewer = useRef(null);
const scrollView = useRef(null);

In the return method for App.js or your component, add the following:


return (
  <div className="App">
    <div id="scroll-view" ref={scrollView}></div>
    <div id="viewer" ref={viewer}></div>
  </div>
  )

And then insert a `useEffect` in App.js (which should only run once upon rendering the component), and add the following:


const App = () => {
  const viewer = useRef(null);
  const scrollView = useRef(null);
  const [documentViewer, setDocumentViewer] = useState(null);
  const [annotationManager, setAnnotationManager] = useState(null);
  useEffect(() => {
    const Core = window.Core;
    Core.setWorkerPath('/webviewer/core');  
    Core.enableFullPDF();
    const documentViewer = new Core.DocumentViewer();
    documentViewer.setScrollViewElement(scrollView.current);
    documentViewer.setViewerElement(viewer.current);
    documentViewer.enableAnnotations();
    documentViewer.loadDocument(' https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf');

    setDocumentViewer(documentViewer);
    documentViewer.addEventListener('documentLoaded', () => {
      setAnnotationManager(documentViewer.getAnnotationManager());
    });
  }, []);

Okay, what is happening there?

We load the Core rendering engine from Apryse.
We set the path to the resources necessary for document rendering.
We create a new document viewer and point it to the div element we created earlier.
We then enable annotations and load our PDF from an s3 bucket, however, you can point it to local files as well in `public` folder.
After that, we set the document viewer to the one we created.
And then we wait for an event that lets us know the viewer is ready to go and the document is loaded.

Provide a best-in-class viewer experience, best quality and performance across web, mobile, and desktop applications with Apryse.

Now, let’s add some CSS, to make sure the viewer looks its best. Inside of App.css (or your component’s CSS), add the following and do not forget to import it:


#scroll-view {
bottom: 0;
height: 100%;
width: 100%;
overflow: auto;
}
#viewer {
margin: auto;

}

At this point, we are ready to start our React app and see the PDF render:


npm run start

If you ran into any trouble, or something is going wrong, just refer to our GitHub sample. If you are still stuck, chat with us on Discord using the link at the end of this article.

If you are looking for a pre-built UI that is battle-tested by millions of developers, check out our other blog: https://apryse.com/blog/embed-react-pdf-viewer.

Add Annotation Support to Your PDF Viewer

Copied to clipboard

The next step, in this demo, is to allow users to draw annotations and comment on a PDF. Thanks to the Apryse Core rendering engine, WebViewer comes with out-of-the-box support for all annotation types supported in Adobe Reader. So, in this section, we are going to add a button to the UI that allows us to draw rectangles on a PDF document.

Inside the return method for App.js or your component, add the button tag just before the scroll view:

return (
  <div className="App">
    <button onClick={createRectangle}>Rectangle</button>
    <div id="scroll-view" ref={scrollView}></div>
    <div id="viewer" ref={viewer}></div>
  </div>
)

Let’s now add the code that will set the tool to be a rectangle whenever that button is pressed.

Somewhere between useEffect and the return statement, add the following:

const createRectangle = () => {
  documentViewer.setToolMode(documentViewer.getTool(window.Core.Tools.ToolNames.RECTANGLE));
};

Now, the button press will allow users to add rectangle annotations. Restart the app and try it yourself. We have used very basic CSS so feel free to play around with it to get it to match your overall theme.

Next Steps

At this point, you can add more tool support, page manipulation, search, redaction and more. Check out the full sample available on GitHub and refer to our guides for more information. You can also chat with us on our Discord.

This article was updated in March 2024.

How To Build a Customizable React PDF Viewer?

Why is Apryse SDK such a powerful tool?

Installing the Apryse Rendering Engine

Creating a React PDF Viewer Component

Add Annotation Support to Your PDF Viewer

Resources

Related Articles

View all blogs

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

Automatically Generating Word Documents Using JavaScript

Getting started with WebViewer in Salesforce