Cross-Platform API

Documentation

Guides

Get started with Cordova

Welcome to Apryse. Apryse technology can be integrated with Cordova using various platforms. You can select your desired platform below.

Web

Windows

Integrating Cordova with WebViewer JavaScript PDF library

This guide will help you integrate a free trial of WebViewer into Cordova applications on the browser. It will help you clone the Cordova sample repository, walk through the project structure, and show you how to call 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.

Prerequisites

Node.js and npm

Node.js is not required for WebViewer

WebViewer does not require Node, npm, or node_modules. It is only recommended to run the samples.

Cordova CLI
```
npm install -g cordova
```
You may have to restart your Command Prompt to access Cordova commands.

No trial license key required.

The trial of Apryse SDK works without a license key. A commercial license key is required for use in a production environment. Please fill out our licensing form if you do not have a valid license key.

Keep your commercial license key confidential.

License keys are uniquely generated. Please make sure that it is not publicly available (e.g. in your public GitHub).

Initial setup

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.

You are now ready to run the sample or use more WebViewer APIs.

Sample overview

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
|       ├── ...
└── www
    ├── index.html
    ├── js
    |   ├── lib
    |   |   ├── ...
    |   └── index.js
    ├── css
    |   └── index.css
    └── img
        └── logo.png

Notable files and directories include:

File/Folder	Description
LICENSE	Lists the copyright and license information.
package.json	Lists the manifest of the project and contains the author/version metadata.
platforms	Contains the platform specific directories and files required to run the project. The `npm install` will add the browser platform by default.
www	Contains all the assets such as the main HTML page `index.html`, the WebViewer libraries (in `/js/lib/`) as well as the JavaScript files that are used for the sample.

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.

Run the sample

Run the application by executing:
```
npm start
```
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:

Use more WebViewer APIs

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:

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

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

Cordova Sample Dark

Next step

Usage Guides Samples API docs

Get the answers you need: Support

Did you find this guide helpful?

Yes

Free Trial Support