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 enables you to view, annotate and manipulate PDFs and other document types inside any web project.
This sample demonstrates how to integrate WebViewer into a TypeScript project using Parcel as the bundler. It shows how to write type-safe code against the WebViewer API using the bundled TypeScript definition file, giving you editor auto-complete and compile-time type checking.
A license key is required to run WebViewer. You can obtain a trial key in our get started guides, or by signing-up on our developer portal.
Before you begin, make sure your development environment includes Node.js.
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 index.ts file at /src/index.ts
- Replace 'Insert commercial license key here after purchase' with your license key
- Save the file
git clone --depth=1 https://github.com/ApryseSDK/webviewer-samples.git
cd webviewer-samples/webviewer-typescript
npm installnpm startnpm start copies the required WebViewer static assets into the lib/ folder, runs a production Parcel build into dist/, then starts a custom Node.js HTTP server at http://localhost:1234.
The server routes /lib/ requests directly from ./lib (with correct MIME types) and all other requests from ./dist, so WebViewer assets are served with the correct content type.
Note: The
dist/andlib/folders are generated at build time and are listed in.gitignore. You do not need to commit them. To copy the WebViewer assets manually without a full build, run:npm run copy-webviewer
If you see unexpected behaviour after upgrading dependencies, clear the Parcel build cache and restart:
rm -rf .parcel-cache
npm start