WebViewer is a powerful JavaScript-based PDF Library that's part of the Apryse SDK.
This repo is specifically designed for any users interested in how to serve WebViewer's lib from a different domain.
We recommend serving WebViewer lib on the same domain as the app itself for additional performance and security.
Before you begin, make sure your development environment includes Node.js.
Clone the repository
git clone https://github.com/ApryseSDK/webviewer-cors.git
Install WebViewer lib static server
cd webviewer-cors/webviewer-lib
npm i
Install React-TypeScript app
cd webviewer-cors/webviewer-app
npm i
After the install completed, the postinstall will copy over WebViewer's lib folder to the static server under public/lib.
# If the WebViewer lib folder is on another origin from your app then you will
# need to include your app's origin here if you want to load a config file
http://localhost:3000
Run WebViewer lib static server to serve WebViewer lib
cd webviewer-cors/webviewer-lib
npm start
Run React-TypeScript app
cd webviewer-cors/webviewer-app
npm start
Since the WebViewer iframe is hosted on a different domain, to interact and use APIs, we have to utilize postMessage.
The config.js and App.tsx are configured to communicate with each other to load a document and use some of the APIs like adding a rectangle annotation on page 2 of the document.
If you make any changes to config.js make sure to restart the webviewer-lib http-server.
See license.