Some test text!
Web / Guides / Integrate via NPM
Platform
Documentation
WebViewer versions 6.0+ can be installed via npm. Since WebViewer requires static resources to be served (which cannot be bundled), there is an extra step required which involves manually copying these static files into your dist directory.
Prior to starting, you should have already installed Node and npm.
Run the following command in your project:
npm i @pdftron/webviewer
This will install the main JS entrypoint, as well as download some static assets required for WebViewer to run.
Next, we must copy the static assets required for WebViewer to run into a public location that will be served via HTTP/HTTPS (usually a dist
or build
folder). The static files are located in node_modules/@pdftron/webviewer/public
.
Below are a few ways you could automate this process:
NPM script
WebPack
Parcel
Other
{
"scripts": {
"move-static": "cp -a ./node_modules/@pdftron/webviewer/public/. ./dist/public/webviewer",
"build": "mybuildscript && npm run move-static"
}
}
When using WebViewer in your code, you will have to tell it where you copied these static files using the path
parameter.
For example, if you copied the static files into dist/public/webviewer
, your code would look something like this:
import WebViewer from '@pdftron/webviewer'
WebViewer({
path: '/public/webviewer',
}, document.getElementById('viewer'))
.then(instance => {
const { UI, Core } = instance;
const { documentViewer, annotationManager, Tools, Annotations } = Core;
// call methods from UI, Core, documentViewer and annotationManager as needed
documentViewer.addEventListener('documentLoaded', () => {
// call methods relating to the loaded document
});
instance.UI.loadDocument('http://fileserver/documents/test.pdf');
})
Get the answers you need: Support