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:

    

   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:

<br />
cd ~<br />
mkdir cordovaPlugin<br />
cd cordovaPlugin</p>
<p># Create widget<br />
plugman create --name FoxitPreview --plugin_id FoxitPreview --plugin_version 1.0.0</p>
<p># Into the plugin directory<br />
cd FoxitPreview</p>
<p># Plugin.xml increase iOS platform<br />
plugman platform add --platform_name ios<br />

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:

    

   var exec = require('cordova/exec');</p>
   <p>var pdf = function(){};</p>
   <p>pdf.prototype.preview = function(arg0, success, error) {<br />
   exec(success, error, &quot;FoxitPdfPreview&quot;, &quot;Preview&quot;, [arg0]);<br />
   };</p>
   <p>var pdf = new pdf();<br />
   module.exports = pdf;<br />
   

    

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:

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:

    

   <br /> #import <FoxitRDK/FSPDFObjC.h><br /> #import <FoxitRDK/FSPDFViewControl.h><br />

    

2. Initialize the mobile PDF SDK:

    

   NSString* sn = @"***";<br /> NSString* unlock = @"***";<br /> [FSLibrary init:sn key:unlock];<br />

    

3. Load a document:

    

   //load doc<br />
   NSString* docPath= [[NSBundle mainBundle] pathForResource:@&quot;getting_started_ios&quot; ofType:@&quot;pdf&quot;];<br />
   FSPDFDoc* doc = [FSPDFDoc createFromFilePath:docPath];<br />
   [doc load:nil];<br />
   

    

4. Display Foxit MobilePDF SDK’s View Control:

    

   FSPDFViewCtrl* myTestViewCtrl;<br /> myTestViewCtrl = [[FSPDFViewCtrl alloc] initWithFrame:[[UIScreen mainScreen] bounds]];<br /> [myTestViewCtrl setDoc:doc];<br /> UIViewController *testctrl = [[UIViewController alloc] init];<br /> [testctrl.view addSubview:myTestViewCtrl];<br /> testctrl.view.backgroundColor = [UIColor whiteColor];</p> <p> //create a navigation bar<br /> UINavigationBar *navBar = [[UINavigationBar alloc]initWithFrame:CGRectMake(0, 0, self.viewController.view.frame.size.width, 64)];<br /> [testctrl.view addSubview:navBar];</p> <p> // Create an item<br /> UINavigationItem *item = [[UINavigationItem alloc]initWithTitle:@"PDF Preview"];<br /> navBar.items = @[item];<br /> UIBarButtonItem *button = [[UIBarButtonItem alloc]initWithBarButtonSystemItem:UIBarButtonSystemItemCancel target:self action:@selector(close)];<br /> item.rightBarButtonItem = button;</p> <p>[self.viewController presentViewController:testctrl animated:YES completion:^{<br />      NSLog(@"A modal window pops up");<br /> }];<br />

    

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:

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

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

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!