@pdftron/webviewer

WebViewer

WebViewer is a powerful JavaScript Document SDK and UI Component Library that is a part of the Apryse PDF SDK. It provides a slick, out-of-the-box responsive UI that interacts with the core library to view, annotate, and edit PDF, DOCX, XLSX, PPTX, images, videos, audio and CAD. It can be easily embedded into any JS project and is compatible with frameworks like React, Angular, Vue, Next.js, Nuxt, Electron, Svelte. WebViewer can also be integrated into Salesforce, Mendix, Appian, OutSystems, and SharePoint.

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

WebViewer comes with a 7-day trial without any feature limitations or trial key needed. To extend the trial, you can obtain the trial key by signing-up on our developer portal.

Usage

Full get-started guides and videos are available in our docs.

1) Install WebViewer

npm i @pdftron/webviewer --save

This will also download all the assets that need to be included for WebViewer to work.

2) Copy assets and resources to your public/static folder

These assets need to be served with your application. For example, if your project is built into a dist folder, you could copy these assets into dist/public.

The folder you need to copy is node_modules/@pdftron/webviewer/public.

cp -R ./node_modules/@pdftron/webviewer/public ./dist

We recommend using a module bundler like Webpack to automatically do this for you. There is a nice plugin called copy-webpack-plugin that does just this.

3) Import and instantiate WebViewer

import WebViewer from '@pdftron/webviewer'

const element = document.getElementById('viewer');

WebViewer({
  path: '/public', // point to where the files you copied are served from
  initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/PDFTRON_about.pdf' // path to your document
}, element).then((instance) => {
  // Call APIs here
})

Documentation

Full documentation for WebViewer can be found here.

Licensing

WebViewer will run in trial mode until a license is provided. For more information on licensing, please visit our website.