Windows & Cordova PDF library integration

This guide will help you integrate a free trial of the WebViewer SDK into Cordova applications on Windows. It will help you clone the Cordova sample repository, walk through the project structure, and show you how to use other WebViewer APIs. Your free trial includes unlimited trial usage and support from solution engineers.

Note: There are other approaches that can be used to integrate Apryse technology with Cordova. Please see this FAQ page to find out more about the relative strengths of each approach.

Get the Cordova source code here

• Node.js and npm

• MSBUILD

  The easiest way to acquire this is by downloading Visual Studio.

  Note: Cordova applications cannot currently be built using Visual Studio 2019. Please make sure you're using an older version.

  Make sure that MSBUILD is part of your installation.

  For more details on using cordova on Windows see the Cordova documentation.

• Cordova CLI

  npm install -g cordova

  You may have to restart your Command Prompt to access Cordova commands.

1. Set the MSBUILDDIR environment variable.

   This should be set to the MSBUILD/VersionNum/bin folder inside your Visual Studio Installation.

2. Clone the webviewer-cordova-sample repository:

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

3. Enter the directory and run npm install:

   cd webviewer-cordova-sample
   npm install

   This will automatically download and extract the Apryse WebViewer Package.

4. Add Windows as a platform for Cordova

   cordova platform add windows

5. Build for windows and run the application:

   cordova build windows && cordova run windows

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

   cordova requirements

   Your app should look like this:

   

   This application is also installed on Windows 10 and can be found by searching in the Start search bar.

After initial setup, the webviewer-cordova-sample directory should be laid out like this:

webviewer-cordova-sample
├── LICENSE
├── package.json
├── package-lock.json
├── README.md
├── node_modules
│   ├── ...
├── hooks
│   ├── ...
├── res
│   ├── ...
├── platforms
│   ├── browser
|   |   ├── ...
│   └── windows
|       ├── ...
└── www
    ├── index.html
    ├── js
    |   ├── lib
    |   |   ├── ...
    |   └── index.js
    ├── css
    |   └── index.css
    └── img
        └── logo.png

Notable files and directories include:

www/js/index.js instantiates the WebViewer in the viewer element outlined by index.html. It is also where the WebViewer API calls are placed.

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",
      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) {
        var docViewer = instance.docViewer;
        var annotManager = instance.annotManager;
        // call methods from instance, docViewer and annotManager as needed.
        // you can also access major namespaces from the instance as follows:
        // var Tools = instance.Tools;
        // var Annotations = instance.Annotations;

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

WebViewer({
      path: "js/lib",
      pdftronServer: '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) {
        var docViewer = instance.docViewer;
        var annotManager = instance.annotManager;
        // call methods from instance, docViewer and annotManager as needed.
        // you can also access major namespaces from the instance as follows:
        // var Tools = instance.Tools;
        // var Annotations = instance.Annotations;

        // See https://docs.apryse.com/documentation/web/guides/basic-functionality 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:

instance.setTheme('dark');

Execute cordova run windows again and the theme of the viewer will change.

Usage Guides Samples API docs