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:

MobilePDF SDK Cordova Plugin Demo 2

Lets get started

  1. Begin by installing npm if it is not already installed.
  2. Install the Cordova framework:
    install -g Cordova
  3. Install Plugman which is used to manage plugman Cordova plugins:
    npm install -g plugman
  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:

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

The below directory structure is created after the commands to create the plug-in have been run successfully:

Structure of Cordova plugin

Now lets start to modify the code.

  1. Modify plugin.xml to include a reference to the Foxit MobilePDF SDK framework.
    Contents of plugin.xml
  2. Open and modify the FoxitPdfPreview.js file to define the method we will use to preview PDFs:
    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;
    

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

  1. JavaScript call
    cordova.plugins.FoxitPdfPreview.preview(arg0, success, error)
  2. Cordova interface execution
    exec(success, error, "FoxitPdfPreview", "Preview", arg0);
  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:

FoxitPdfPreview.m Cordova Plugin Implementation

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:
    #import <FoxitRDK/FSPDFObjC.h> 
    #import <FoxitRDK/FSPDFViewControl.h>
    
  2. Initialize the mobile PDF SDK:
    NSString* sn = @"***";
    NSString* unlock = @"***";
    [FSLibrary init:sn key:unlock];
    
  3. Load a document:
    //load doc
    NSString* docPath= [[NSBundle mainBundle] pathForResource:@"getting_started_ios" ofType:@"pdf"];
    FSPDFDoc* doc = [FSPDFDoc createFromFilePath:docPath];
    [doc load:nil];
    
  4. Display Foxit MobilePDF SDK’s View Control:
    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"); 
    }];
    

The final code:

7-72c7bc44-774d-4a02-8f45-77daacdad1d5

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:

cd ~ / cordovaPlugin

# Create Project
cordova create pdftest

Create folder for test project

# Into the directory
cd pdftest

# Introduce the plugin
cordova plugin add ../FoxitPdfPreview

9-image2016-12-9-16-18-4

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.

9-a-image2016-12-9-16-24-31

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

10-image2016-12-9-16-26-44

# index.js

11-image2016-12-9-16-27-39

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.

12-image2016-12-9-16-38-7

Next, build and run the app. Here’s how it should look:

12-cordova-plugin-foxitpreview2

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!