WebViewer - React sample

WebViewer is a powerful JavaScript-based PDF Library that is part of the Apryse SDK. It provides a slick out-of-the-box responsive UI that interacts with the core library to view, annotate and manipulate PDFs that can be embedded into web projects.

This repo is specifically designed for any users interested in integrating WebViewer into React project. You can watch a video here to help you get started.

Demos

• Customizable out-of-the-box UI
• PDF Viewer
• DOCX Editor
• Annotation & Markup
• Generate PDFs from DOCX template
• Digital Signatures
• PDF Text Editing
• Page Manipulation
• Redaction
• Form Building
• Annotate Videos
• More

Trial

You can obtain the trial key by signing-up on our developer portal.

Initial setup

Before you begin, make sure your development environment includes Node.js.

This sample requires Node version 20. To check your version, run node -v in a terminal/console window.

In order to set the license key, you will need to set the string in the WebViewer sample. One such way is by passing it into the constructor of the WebViewer: https://docs.apryse.com/documentation/web/faq/add-license/#passing-into-constructor

Follow the steps below to set the license key in this sample:

• Locate the app.component.ts file at /src/app.js
• Replace "your_license_key" with your license
• Save the file

Install

git clone https://github.com/ApryseSDK/webviewer-react-sample.git
cd webviewer-react-sample
npm install

Run

npm start

After the app starts, you will be able to see WebViewer running on localhost:3000.

Build

Run npm run build to build the project. The build artifacts will be stored in the build/ directory. See the section about deployment for more information.

To test the build directory locally you can use serve or http-server. In case of serve, by default it strips the .html extension stripped from paths. We added serve.json configuration to disable cleanUrls option.

GitHub Pages

You can deploy your app to GitHub Pages. To do so, make sure to update paths accordingly, for example, to deploy on pdftron.github.io/webviewer-react-sample, modify the path:

WebViewer(
 {
   path: '/webviewer-react-sample/webviewer/lib',
   initialDoc: '/webviewer-react-sample/files/PDFTRON_about.pdf',
 },
 viewer.current,
).then((instance) => {

WebViewer APIs

See API documentation.

Contributing

See contributing.

License

See license.