How to Implement Foxit PDF SDK for Android using Cordova Plugin

Apache Cordova is a very useful open-source framework for developing easy-to-use cross-platform mobile applications. The ‘cordova-plugin-foxitpdf’ is only one of the mobile framework projects provided by us to use with Foxit PDF SDK for Android. The plugin allows you to use powerful PDF viewing features with Cordova framework. Through this plugin, you can preview any PDF file including PDF 2.0 compliant files, XFA documents, and RMS protected documents, as well as comment on and edit PDF documents.

This section will help you get started with Foxit PDF SDK for Android and the Cordova plugin for Windows. For other operating systems, you can take this tutorial only as reference.

System Requirements

• NPM
• Cordova 8.1.2
• Android
• Foxit PDF SDK For Android 6.2
• JDK 1.8

Note: The version of Foxit PDF SDK for Android should match the version of the ‘cordova-plugin-foxitpdf’ plugin. You can specify the plugin version when installing it, if not, the latest version will be installed.

Install Cordova Command-line Tool

Please refer to the website https://cordova.apache.org/#getstarted to install the Cordova command-line tool.

Build a Cordova project using Foxit PDF SDK for Android

Create a Cordova project

Navigate to the directory where you wish to create your project and type cordova create . For example, open a command prompt or terminal, go to “D:\cordova”, and type the command below to create a cordova project:

cordova create test_cordova com.app Test_Cordova

Add Platforms

After creating a Cordova project, navigate to the project directory (D:\cordova\test_cordova), and type the command below to add Android platform to build your app.

cd test_cordova
cordova platform add android

Install ‘cordova-plugin-foxitpdf’ plugin

To install ‘cordova-plugin-foxitpdf’ plugin, type the following command:

cordova plugin add cordova-plugin-foxitpdf

Or you can install via repo url directly:

cordova plugin add https://github.com/foxitsoftware/cordova-plugin-foxitpdf.git

Integrate Foxit PDF SDK for Android

Download “foxitpdfsdk_6_3_android.zip” package and extract it, and then follow the steps below:

1. Copy “libs” folder from “foxitpdfsdk_6_3_android” to “D:\cordova\test_cordova\platforms\android” directory.
2. Copy the license key strings in “rdk_sn.txt” and “rdk_key.txt” in the “libs” folder of Foxit PDF SDK for Android package. You will paste the strings into the sample code below:
3. Add the following code to “test_cordova\www\js\index.js” file to open a PDF document.

        this.receivedEvent('deviceready');
        var sn = 'your_sn_string==';
        var key = 'your_key_string==';
        window.FoxitPdf.initialize(sn,key);

        //Android
        //if you use the 'cordova-plugin-file' plugin, you can set the filePath like this: 
        //var filePath = cordova.file.externalRootDirectory + 'FoxitSDK/Sample.pdf';
        //otherwise:
        var filePath = "your_file_path";
        //If you have a password protection, add below. Othwerwise leave an empty string.
        var password = '';
        window.FoxitPdf.openDocument(filePath, password);

Note: Here, assume that you have pushed the “complete_pdf_viewer_guide_android.pdf” document into the “FoxitSDK” folder of the Android device or emulator that you are using to run this project. Of course, you can change the file path with your own files.

Run the project

To run the project, you can use the following commands or run it in Android Studio directly.

cordova prepare
cordova run android                 // for device
cordova run android --emulator      // for emulator

Before running this command, you need to set up the device or emulator at first.

Note: If you encounter the problem “AAPT: error: resource android: attr/fontVariationSettings not found”, please add the following code to “test_cordova\platforms\android\app\build.gradle” (just copy and paste the code to the end line of the “build.gradle” file), or you can upgrade the Android SDK to 28 or higher.

configurations.all {
resolutionStrategy {
        force 'com.android.support:support-v4:27.1.0'
}
}

After running the project successfully, the “complete_pdf_viewer_guide_android.pdf” document will open as follows:

Customizing the UI

To customize the UI for your project, please go to our articles on the UIExtensions project:

• How to Implement the UIExtensions project in Foxit PDF SDK for Android
• ‘Customizing the UI with UIExtensions using Foxit PDF SDK for Android.”

All the instructions on how to set up and customize your project will be provided there.