Some test text!

Search
Hamburger Icon

Web / Guides / Cordova

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
  • WebViewer will work for 7 days without any feature limitations. To extend your trial, sign-up to get your trial key.

Login / Sign Up to get a trial key

Get Started with the Sample

1. Clone the Sample

Clone the webviewer-cordova-sample repository:

git clone https://github.com/PDFTron/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.pdftron.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/documentation/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

Get the answers you need: Chat with us