Integrate WebViewer JavaScript PDF Viewer & Editor into a Cordova App

This guide will show you how to integrate WebViewer Document Viewer & Editor into a Cordova application.

You can also download a ready-to-go sample on GitHub.

Prerequisites

Prior to starting, you should have already installed Node and npm.

• Cordova CLI

• Get your Apryse trial key.

Get Started with the Sample

1. Clone the Sample

Clone the webviewer-cordova-sample repository:

Shell

git clone https://github.com/ApryseSDK/webviewer-cordova-sample.git

Enter the directory and run npm install:

Shell

cd webviewer-cordova-sample
npm install

This will automatically download and extract the Apryse WebViewer Package.

2. Run the sample

Run the application by executing:

Shell

npm start

If your build fails, use the following command to see a list of requirements for your added platforms:

Shell

cordova requirements

3. Usage

To call more WebViewer APIs, open /www/js/index.js in your favorite text editor and add the API calls to the callback for the WebViewer instantiation:

JavaScript (SDK v8.0+)

WebViewer({
  path: "js/lib",
  licenseKey: 'YOUR_LICENSE_KEY', // sign up to get a key at https://dev.apryse.com
  webviewerServerURL: 'https://demo.apryse.com/', // Make sure to change this option to point to your own server in production
  initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/sample.pdf',
  enableAnnotations: true,
  disabledElements: [
    'menuButton'
  ]
}, document.getElementById('viewer'))
  .then(function(instance) {
    const { documentViewer, annotationManager, Annotations, Tools } = instance.Core;

    // See https://docs.apryse.com/web/guides/ for more info.
    documentViewer.addEventListener('documentLoaded', function() {
      // call methods relating to the loaded document
    });
  });

JavaScript (SDK v6.0+)

WebViewer({
  path: "js/lib",
  licenseKey: 'YOUR_LICENSE_KEY', // sign up to get a key at https://dev.apryse.com
  pdftronServer: 'https://demo.apryse.com/', // Make sure to change this option to point to your own server in production
  initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/sample.pdf',
  enableAnnotations: true,
  disabledElements: [
    'menuButton'
  ]
}, document.getElementById('viewer'))
  .then(function(instance) {
    const docViewer = instance.docViewer;
    const annotManager = instance.annotManager;
    // call methods from instance, docViewer and annotManager as needed.
    // you can also access major namespaces from the instance as follows:
    // const Tools = instance.Tools;
    // const Annotations = instance.Annotations;

    // See https://docs.apryse.com/web/guides/ for more info.
    docViewer.on('documentLoaded', function() {
      // call methods relating to the loaded document
    });
  });

For example, if you want to change the theme of the WebViewer to dark mode, you would add the following:

JavaScript (SDK v8.0+)

instance.UI.setTheme('dark');

JavaScript (SDK v6.0+)

instance.setTheme('dark');

Execute npm start again and the theme of the viewer will change.

Next step

UsageGuidesSamplesAPI docs