You can also download a ready-to-go sample on GitHub.
Prerequisites
Prior to starting, you should have already installed Node and npm.
You should also have a React project to work in. If you do not have one, we recommend following our Vite guide as it is the easiest way to get started.
Get your Apryse trial key.
License Key
Apryse collects some data regarding your usage of the SDK for product improvement.
The data that Apryse collects include:
The names and number of API calls
The number of pages in a document
The version of the SDK
The language of the SDK
For clarity, no other data is collected by the SDK and Apryse has no access to the contents of your documents.
If you wish to continue without data collection, contact us and we will email you a no-tracking trial key for you to get started.
Quick start video
This video teaches you the fundamentals of installing and initializing WebViewer in any web application. If you wish, you may skip this section and proceed to the steps below.
1. Install WebViewer NPM module
Run the following command in your Terminal or Command Line:
sh
1npm i @pdftron/webviewer
2. Copy static assets
We also have to copy the static assets required for WebViewer to run. The files are located in node_modules/@pdftron/webviewer/public and must be moved into a location that will be served and publicly accessible. Typically, this will be a public folder.
In package.json we will add a command that copies these static assets to our public folder.
JSON
package.json
1{
2 "scripts": {
3 "copy-webviewer": "mkdir -p ./public/lib/webviewer && cp -a ./node_modules/@pdftron/webviewer/public/* ./public/lib/webviewer",
4 "dev": "npm run copy-webviewer && next dev",
5 "build": "npm run copy-webviewer && next build",
6 }
7}
You'll notice that we also updated our other scripts to run this command first - this is recommended to make sure your WebViewer assets are always in the right place.
Inside of a useEffect hook, initialize WebViewer. Ensure that the path property in the constructor points to where you copied your static assets earlier.