Using Foxit MobilePDF SDK with Apache Cordova

Since this post was published, we have released Foxit PDF SDK, the only true multi-platform SDK in the market, available for Windows, Mac, Linux, iOS, Android, UWP and Web. It features a single, consistent core API, as well as a built-in viewer and UI for faster development. Learn more. Apache Cordova (also known as Adobe PhoneGap) is a mobile application development framework which enables developers to build apps using CSS3, HTML5, and JavaScript. In today’s tutorial I am going to show you how to create a Cordova plug-in that uses Foxit MobilePDF SDK to display PDF files. Here’s a quick preview of what the end result will look like:

Lets get started

1. Begin by installing npm if it is not already installed.
2. Install the Cordova framework:

   [code lang=”shell”]install -g Cordova[/code]

3. Install Plugman which is used to manage plugman Cordova plugins:

   [code lang=”shell”]npm install -g plugman[/code]

4. Download the free Foxit MobilePDF SDK trial.

Now that this preparatory work is complete, we can start running some commands to build our plugin:

[code lang=”shell”]
cd ~
mkdir cordovaPlugin
cd cordovaPlugin

# Create widget
plugman create –name FoxitPreview –plugin_id FoxitPreview –plugin_version 1.0.0

# Into the plugin directory
cd FoxitPreview

# Plugin.xml increase iOS platform
plugman platform add –platform_name ios
[/code]

The below directory structure is created after the commands for the plug-in to be run successfully: Now lets start to modify the code.

1. Modify plugin.xml to include a reference to the Foxit MobilePDF SDK framework.
2. Open and modify the FoxitPdfPreview.js file to define the method we will use to preview PDFs:

   [code lang=”js”]var exec = require(‘cordova/exec’);

   var pdf = function(){};

   pdf.prototype.preview = function(arg0, success, error) {
   exec(success, error, "FoxitPdfPreview", "Preview", [arg0]);
   };

   var pdf = new pdf();
   module.exports = pdf;
   [/code]

This is the current flow of our Cordova plug-in:

1. JavaScript call

   [code lang=”js”]cordova.plugins.FoxitPdfPreview.preview(arg0, success, error)[/code]

2. Cordova interface execution

   [code lang=”js”]exec(success, error, "FoxitPdfPreview", "Preview", arg0);[/code]

3. Call the underlying implementation class FoxitPdfPreview for respective platforms (iOS or Android).

Now we need to modify the plugin to introduce code to call Foxit MobilePDF SDK and to render the PDF. Start with the default generated code like this: To support rendering a PDF, we need to introduce Foxit’s MobilePDF SDK:

1. First, add the mobile PDF SDK header file into the project:

   [code lang=”cpp”]
   #import <FoxitRDK/FSPDFObjC.h>
   #import <FoxitRDK/FSPDFViewControl.h>
   [/code]

2. Initialize the mobile PDF SDK:

   [code lang=”cpp”]NSString* sn = @"***";
   NSString* unlock = @"***";
   [FSLibrary init:sn key:unlock];
   [/code]

3. Load a document:

   [code lang=”cpp”]//load doc
   NSString* docPath= [[NSBundle mainBundle] pathForResource:@"getting_started_ios" ofType:@"pdf"];
   FSPDFDoc* doc = [FSPDFDoc createFromFilePath:docPath];
   [doc load:nil];
   [/code]

4. Display Foxit MobilePDF SDK’s View Control:

   [code lang=”cpp”]FSPDFViewCtrl* myTestViewCtrl;
   myTestViewCtrl = [[FSPDFViewCtrl alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
   [myTestViewCtrl setDoc:doc];
   UIViewController *testctrl = [[UIViewController alloc] init];
   [testctrl.view addSubview:myTestViewCtrl];
   testctrl.view.backgroundColor = [UIColor whiteColor];

   //create a navigation bar
   UINavigationBar *navBar = [[UINavigationBar alloc]initWithFrame:CGRectMake(0, 0, self.viewController.view.frame.size.width, 64)];
   [testctrl.view addSubview:navBar];

   // Create an item
   UINavigationItem *item = [[UINavigationItem alloc]initWithTitle:@"PDF Preview"];
   navBar.items = @[item];
   UIBarButtonItem *button = [[UIBarButtonItem alloc]initWithBarButtonSystemItem:UIBarButtonSystemItemCancel target:self action:@selector(close)];
   item.rightBarButtonItem = button;

   [self.viewController presentViewController:testctrl animated:YES completion:^{
   NSLog(@"A modal window pops up");
   }];
   [/code]

The final code: This is all of the code required for our Cordova plugin which uses Foxit MobilePDF SDK to display PDF files.

Let’s create a test project and try the plugin

Choose a location to save the test project or just create a test project in Cordova Plugin directory:

[code lang=”shell”]
cd ~ / cordovaPlugin

# Create Project
cordova create pdftest
[/code]

[code lang=”shell”]
# Into the directory
cd pdftest

# Introduce the plugin
cordova plugin add ../FoxitPdfPreview
[/code]

At this point the plugin has been added to the project but there’s a few settings we need to double-check. Although the plug-in mechanism helps us automatically copy FoxitRDK.framework to the XCode project, we need to double-check the settings to make sure they are correct otherwise there might be some errors. Next, we will modify the HTML and JavaScript code in the widget to add a button and some associated functions for calling the plugin to view the PDF: #index.html # index.js At this point, the code has been completed. Below is the test code to review. We’ll use the getting_started_ios.pdf for testing and we’ll presume it is in the root directory (copy the file from the Foxit MobilePDF SDK trial version to this location if it is not there already). Of course you can add the a path to a different file in your own code if you wish. Next, build and run the app. Here’s how it should look:

Install the plugin or get the source code

I have added the Cordova plugin to npm for you to try yourself and also uploaded the source code to GitHub. Try it out and let me know if you have any feedback. NPM Cordova Plugin (cordova-plugin-foxitpdf) https://www.npmjs.com/package/cordova-plugin-foxitpdf GitHub Source Code (cordova-plugin-foxitpdf) https://github.com/foxitsoftware/cordova-plugin-foxitpdf Thanks for checking out this tutorial!