WebViewer - JS 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, MS Office, videos, images, and CAD that can be embedded into any web project.

This repo is specifically designed for any users interested in integrating WebViewer into a vanilla JS project.

Demo

You can explore all of the functionality in our showcase.

Initial Setup

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

1. Node.js.
2. IDE used in this sample is Visual Studio Code with an NPM extension to process commands within its terminal.
3. GitHub command line git.

Install

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

npm install gets and installs required dependencies. Make sure .parcelrc is available at the root and configured as below.

{
  "extends": "@parcel/config-default",
  "reporters": [
    "...",
    "parcel-reporter-multiple-static-file-copier"
  ]
}

Run

npm start

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

Static Resources

WebViewer requires static resources created in the dist folder. Make sure the origin and destination are specified as below in the package.json.

  "multipleStaticFileCopier": [
    {
      "origin": "node_modules/@pdftron/webviewer/public",
      "destination": "dist/public/webviewer"
    }
  ]

The package.json file contains the start and build scripts. The only script to call is the start to run the app out-of-the-box.

    "start": "parcel index.html --open http://localhost:1234"

WebViewer APIs

• @pdftron/webviewer API documentation
• @pdftron/webviewer-js-sample API documentation
• API documentation: WebViewerInstance.

Showcase

Refer to a running sample on Apryse SDK showcase page.

License

For licensing, refer to License.