Did you find this guide helpful?
Some test text!
Web / Guides / Manual integration
This guide will show you how to get started with the WebViewer SDK through manual installation. By the end of this guide, you should be able load WebViewer into any app. This is the guide for you if you are looking to add WebViewer outside of a package manager .
Prior to starting, you should have already installed Node and npm.
Apryse collects some data regarding your usage of the SDK for product improvement.
If you wish to continue without data collection, contact us and we will email you a no-tracking trial key for you to get started.
To start, we need a server environment ready. If you do not have a server, follow these steps:
* Create a folder for your project. This guide will assume your project is called myServer.
* Open a terminal in that folder and execute:
```
npm install -g http-server
```Extract the WebViewer package (WebViewer.zip) into your project directory (/myServer).
Create a new index.html webpage in the same project directory and paste this inside:
<html>
<head>
<title>Basic WebViewer</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<!-- Import WebViewer as a script tag -->
<script src='WebViewer/lib/webviewer.min.js'></script>
<body>
<div id='viewer' style='width: 1024px; height: 600px; margin: 0 auto;'></div>
</body>
</html>To import WebViewer as a CommonJS module, see this section .
Next to instantiate WebViewer, add this script to the body after the viewer div declaration from the previous step. Add your own license key in place of 'YOUR_LICENSE_KEY'.:
Starting in version 10.2 you can choose to instantiate WebViewer using a web component instead of an iframe. See this guide for more information.
Iframe
Web Component
<script>
WebViewer({
path: 'WebViewer/lib', // path to the Apryse 'lib' folder on your server
licenseKey: 'YOUR_LICENSE_KEY', // sign up to get a key at https://dev.apryse.com
initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/webviewer-demo.pdf',
// initialDoc: '/path/to/my/file.pdf', // You can also use documents on your server
}, document.getElementById('viewer'))
.then(instance => {
const { documentViewer, annotationManager } = instance.Core;
// call methods from instance, documentViewer and annotationManager as needed
// you can also access major namespaces from the instance as follows:
// const Tools = instance.Core.Tools;
// const Annotations = instance.Core.Annotations;
documentViewer.addEventListener('documentLoaded', () => {
// call methods relating to the loaded document
});
});
</script>To start your local server, run the following:
http-server -a localhostOpen http://localhost:8080/index.html on your browser. If you already have the page open, refresh the page. You should see WebViewer start up.
You can also import WebViewer as a CommonJS module when installed manually. It is recommended to install via npm if you have the option.
First, install the module. Replace PATH_TO_WEBVIEWER with the path from your package.json file to the WebViewer lib folder.
npm install PATH_TO_WEBVIEWER/libThen use the following import statement in your JavaScript file.
import WebViewer from 'webviewer';
// import Apryse instead of WebViewer for 4.0 ~ 5.0Trial setup questions? Ask experts on Discord
Need other help? Contact Support
Pricing or product questions? Contact Sales