Some test text!

Search
Hamburger Icon

Web / Guides

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.

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.

Get Started with the Sample

1. Clone the Sample

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.

2. Run the sample

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

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:

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.

Next step

Usage Guides Samples API docs

Trial setup questions? Ask experts on Discord
Need other help? Contact Support
Pricing or product questions? Contact Sales