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.
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.
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
})
Full documentation for WebViewer can be found here.
WebViewer will run in trial mode until a license is provided. For more information on licensing, please visit our website.