Some test text!

menu
search

Cordova

Welcome to PDFTron. This guide will help you with integrating the WebViewer SDK into your Cordova application on Windows. After you clone the Cordova Sample repository and walk through the project structure, you can see how to call other WebViewer API.

linkPrerequisites

  1. Node.js and npm
  2. 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.

  3. Cordova CLI

    npm install -g cordova

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

linkSetup

  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 PDFTron 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:

    Cordova WebViewer Sample

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

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

Notable files and directories include:

File/FolderDescription
LICENSELists the copyright and license information.
package.jsonLists the manifest of the project and contains the author/version metadata.
platformsContains the platform specific directories and files required to run the project. The npm install will add the browser platform by default. The windows folder also contains the appx files and sln files which can be used to run the application on Windows other than calling cordova run windows.
wwwContains 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.

linkUse 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:

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://www.pdftron.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.

Cordova Sample Dark

You can learn about and add more features by reading our guides, samples and API.

You can find the full source code for this project here.

Get the answers you need: Support

close

Free Trial

Get unlimited trial usage of PDFTron SDK to bring accurate, reliable, and fast document processing capabilities to any application or workflow.

Select a platform to get started with your free trial.

Unlimited usage. No email address required.

PDFTron Receives USD$71 Million Growth Investment Led By Silversmith Capital Partners

Learn more
close