Blog Post

How to Build a Cordova PDF Viewer

Illustration: How to Build a Cordova PDF Viewer

Cordova 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. It can open different file types, including PDFs, and show them onscreen.

Later, we’ll dive into using PSPDFKit as an alternative approach to adding more PDF features — like the ability to annotate and edit documents — for more advanced use cases and increased functionality.

Step 1 — Installing the Prerequisites

Using Cordova requires a few tools to be installed before we can start creating a new app. Here are instructions on what tools you need and how to install them:

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

Find and follow the instructions for installing tools for running on Android here:

Find and follow the instructions for installing tools for running on iOS here:

Step 2 — Creating a New Cordova App

To create our PDF viewer in Cordova, we first need to create a new Cordova project using the following command:

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 13 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="13.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, 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

Now that our project is set up and everything is configured correctly, we can start writing code to 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. Modify the onDeviceReady function, like so:

onDeviceReady: function() {
  this.receivedEvent('deviceready');
    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

This results in the app opening and the PDF being presented, as shown here in the iOS simulator:

PDF using Cordova File Opener plugin on iOS

As you can see, there are some limitations to this approach, namely that the File Opener Plugin only supports the ability to show PDFs, and you can’t edit, search, or programmatically process them.

That said, this solution is a good idea if you want to have simple support for showing PDFs, without any functionality beyond displaying documents.

Opening a PDF with PSPDFKit

To offer a more feature-rich PDF experience in your app, you can also use PSPDFKit.

To do this, remove all the platforms from your project to properly propagate the new plugin addition throughout the project, add the PSPDFKit Cordova plugin, and re-add the platforms, like so:

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 PSPDFKit:

onDeviceReady: function() {
  this.receivedEvent('deviceready');
  const documentPath = cordova.file.applicationDirectory + "www/Document.pdf"
  PSPDFKit.present(documentPath);
}

This will change the PDF presentation method to use PSPDFKit, which already comes with more features — like annotating and table of contents support — out of the box:

PDF using Cordova PSPDFKit plugin on iOS

The Cordova library for PSPDFKit also supports additional customization options, like changing the page transition mode and changing the background color:

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

It’s also possible to programmatically switch pages by setting a specific page index:

PSPDFKit.setPage(3, true);

Conclusion

As you saw, adding PDF support to your app using the File Opener Plugin isn’t difficult. However, in doing so, you’re missing out on a lot of functionality. Meanwhile, PSPDFKit ships with many features out of the box, providing your users with a better user experience. PSPDFKit also comes with great customer support, so please reach out to us if you have any questions about our Cordova integration.

You can find the source code for the entire project here. To run the project, you’ll need to enable the Android or iOS platform, or both, which is done with the cordova platform add command shown earlier in the post.

Related Products
Share Post
Free 60-Day Trial Try PSPDFKit in your app today.
Free Trial

Related Articles

Explore more
PRODUCTS  |  Cordova • Electron • Flutter • React Native • Xamarin • Releases

Advances in Hybrid Technologies

PRODUCTS  |  Cordova • Releases

The All-New PSPDFKit for Cordova Library

TUTORIALS  |  iOS • Cordova • How To

How to Expose Native iOS APIs to Cordova