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.

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

• Cordova CLI
• Get your Apryse trial key.

Clone the webviewer-cordova-sample repository:

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

Enter the directory and run npm install:

cd webviewer-cordova-sample
npm install

This will automatically download and extract the Apryse WebViewer Package.

Run the application by executing:

npm start

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

cordova requirements

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:

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
    });
  });

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

instance.UI.setTheme('dark');

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