Some test text!
Web / Guides / Manual integration
Platform
Documentation
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.
If you require an added capability for annotating mp4
, webm
, and ogg
videos frame by frame inside the browser, please use the separate WebViewer Video get started guide.
To start, we need a server environment ready. If you do not have a server, follow these steps:
myServer
.npm install -g http-server
http-server -a localhost
The server will be hosted on http://localhost:8080
.
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:
<!DOCTYPE html>
<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>
body
after the viewer
div declaration from the previous step:
<script>
WebViewer({
path: 'WebViewer/lib', // path to the Apryse 'lib' folder on your server
licenseKey: 'Insert commercial license key here after purchase',
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>
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.
npm install PATH_TO_WEBVIEWER/lib
Then use the following import statement in your JavaScript file.
import WebViewer from 'webviewer';
// import Apryse instead of WebViewer for 4.0 ~ 5.0
Get the answers you need: Support