How to build a Cordova PDF viewer

Cordova(opens in a new tab) is a hybrid technology that allows you to create cross-platform apps using a single codebase in JavaScript. In this article, we’ll use Cordova and a few plugins to add support for creating a new PDF viewer application that allows opening and showing PDFs directly in your Android or iOS app.

First, we’ll look at using the open source File Opener Plugin(opens in a new tab). It can open different file types, including PDFs, and show them onscreen.

Later, we’ll use PSPDFKit(opens in a new tab) to add more PDF features like annotations and document editing.

Step 1 — Installing the prerequisites

Cordova requires the following tools:

• A development environment set up(opens in a new tab) for running Cordova projects
• The latest stable version of cordova-lib(opens in a new tab)

Additional tools vary depending on if you want to run the app on Android, iOS, or both.

For Android:

• The latest stable version of cordova-android(opens in a new tab)
• The Java Development Kit 8(opens in a new tab)
• The latest stable version of Android Studio(opens in a new tab)
• The Android NDK(opens in a new tab)
• The latest stable version of Gradle(opens in a new tab)
• An Android Virtual Device(opens in a new tab) or a hardware device

For iOS:

• The latest stable version of cordova-ios(opens in a new tab)
• The latest stable version of Xcode(opens in a new tab)
• The latest stable version of CocoaPods(opens in a new tab)

Step 2 — Creating a new Cordova app

Create a new Cordova project:

cordova create CordovaPDFViewer com.cordovapdfviewer.app CordovaPDFViewer

For the rest of the tutorial, we’ll work inside the CordovaPDFViewer directory:

cd CordovaPDFViewer

Step 3 — Setting up dependencies

Next, we’ll set up the dependencies that we’ll use for our PDF viewer application. Open config.xml to enable AndroidX and change the deployment target to iOS 14 or later:

...
  <platform name="android">
+   <preference name="AndroidXEnabled" value="true" />
    <allow-intent href="market:*" />
  </platform>
  <platform name="ios">
    <allow-intent href="itms:*" />
    <allow-intent href="itms-apps:*" />
+   <preference name="deployment-target" value="14.0" />
    ...
  </platform>
...

Then, add the Android and iOS platforms to the project:

cordova platform add android
cordova platform add ios

After, add the File Opener Plugin(opens in a new tab), along with a plugin for easier support for handling file paths:

cordova plugin add cordova-plugin-file-opener2
cordova plugin add cordova-plugin-file

Finally, add the PDF document you want to display in your project’s www directory. You can use this magazine document as an example:

cp ~/Downloads/Document.pdf www/Document.pdf

Step 4 — Writing the app

With the project configured, implement the PDF viewer.

Loading documents

Open the index.js file, which is used as the main entry point of the app:

open www/js/index.js

Next, specify the document path, and open the PDF using the File Opener Plugin. Replace the contents of the onDeviceReady function with the following:

function onDeviceReady() {
    console.log('Running cordova-' + cordova.platformId + '@' + cordova.version);
    document.getElementById('deviceready').classList.add('ready');

    const documentPath = cordova.file.applicationDirectory + 'www/Document.pdf';
    cordova.plugins.fileOpener2.open(
        documentPath,
        'application/pdf',
        {
            error: function (e) {
                console.log('Error status: ' + e.status + ' - Error message: ' + e.message);
            },
            success: function () {
                console.log('file opened successfully');
            },
        },
    );
}

Now, run the app. You can deploy the app to the Android or iOS simulator using the following commands.

For running on Android:

cordova emulate android

For launching the app in the iOS simulator:

cordova emulate ios

The PDF opens in the iOS simulator:

The File Opener Plugin only displays PDFs — no editing, searching, or programmatic processing. It works for basic viewing but lacks advanced functionality.

Opening a PDF with Nutrient

For more features, use Nutrient.

Remove the platforms, add the Nutrient Cordova plugin(opens in a new tab), and re-add the platforms:

cordova platform remove android
cordova platform remove ios

cordova plugin add https://github.com/PSPDFKit/PSPDFKit-Cordova.git

cordova platform add android
cordova platform add ios

Then, modify the onDeviceReady function in the index.js file to replace the File Opener Plugin with Nutrient:

function onDeviceReady() {
    console.log('Running cordova-' + cordova.platformId + '@' + cordova.version);
    document.getElementById('deviceready').classList.add('ready');

    const documentPath = cordova.file.applicationDirectory + 'www/Document.pdf';
    PSPDFKit.present(documentPath);
}

Nutrient includes annotations and table of contents support:

Customize page transitions and background color:

PSPDFKit.present(documentPath, {
  pageTransition: 'scrollContinuous',
  backgroundColor: 'black',
});

Switch pages programmatically:

PSPDFKit.setPage(3, true);

Conclusion

The File Opener Plugin handles basic PDF viewing. Nutrient adds annotations, editing, and more. Reach out to us with questions about the Cordova integration.

Download the source code and run it with cordova platform add android or cordova platform add ios.

FAQ