Getting started on Cordova

Warning

PSPDFKit Cordova is being sunset and will not receive future updates after 1 December 2025. It remains available as source code, should you want to maintain it yourself. All licenses will remain valid and fully supported until 1 December 2025, or until your license expires, whichever occurs later. Interested in transitioning to another Nutrient product? Contact us and we’ll be happy to help.

Requirements

Creating a New Cordova Project

  1. In the terminal, change the current working directory to where you’ll save your project. This example uses the pdf folder created in the home directory:

mkdir ~/pdf
cd ~/pdf
cd /d %userprofile%
mkdir pdf
cd pdf

  1. Create the new Cordova project by running the following command:

cordova create PSPDFKit-Demo com.pspdfkit.demo PSPDFKit-Demo

Installing the PSPDFKit Cordova Dependency

  1. In the terminal, change the location of the current working directory inside the newly created project:

cd PSPDFKit-Demo

  1. Open config.xml in a text editor to enable AndroidX and to change the deployment target to iOS 15 or later:

open config.xml

Your config.xml file should look like this:

...
  <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="15.0" />
    ...
  </platform>
...

  1. Add the PSPDFKit plugin:

cordova plugin add https://github.com/PSPDFKit/PSPDFKit-Cordova.git

  1. Add the Android platform:

cordova platform add android@latest

  1. Open /platforms/android/app/build.gradle in a text editor to update the compile SDK version to 31:

open platforms/android/app/build.gradle

Your platforms/android/app/build.gradle file should look like this:

- compileSdkVersion = cordovaConfig.SDK_VERSION
+ compileSdkVersion = 31

Displaying a PDF

  1. Add the PDF document you want to display in your project’s www directory. You can use this Quickstart Guide PDF as an example.

cp ~/Downloads/Document.pdf platforms/android/app/src/main/assets/Document.pdf

  1. Open the www/js/index.js file:

open www/js/index.js

  1. Modify the onDeviceReady function like so:

...
  onDeviceReady: function() {
    this.receivedEvent('deviceready');
+   const DOCUMENT = (window.cordova.platformId === "ios") ? "Document.pdf" : "file:///android_asset/Document.pdf";
+   PSPDFKit.present(DOCUMENT);
  },
...

  1. Start your emulator.

  2. The app is now ready to launch! Go back to the terminal and run:

cordova emulate android

Next Steps

To learn more about Cordova, make sure to check out the following:

Warning

PSPDFKit Cordova is being sunset and will not receive future updates after 1 December 2025. It remains available as source code, should you want to maintain it yourself. All licenses will remain valid and fully supported until 1 December 2025, or until your license expires, whichever occurs later. Interested in transitioning to another Nutrient product? Contact us and we’ll be happy to help.

Requirements

Installing the PSPDFKit Cordova Dependency

  1. Open the terminal and change the location of the current working directory inside your project:

cd path/to/YourProject

  1. Remove all the platforms from your project to properly propagate the changes in the config.xml file below throughout the project:

cordova platform remove android
cordova platform remove ios

  1. Open config.xml in a text editor to enable AndroidX and to change the deployment target to iOS 15 or later:

open config.xml

Your config.xml file should look like this:

...
  <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="15.0" />
    ...
  </platform>
...

  1. Add the PSPDFKit plugin:

cordova plugin add https://github.com/PSPDFKit/PSPDFKit-Cordova.git

  1. Add back all the platforms:

cordova platform add android@latest
cordova platform add ios@latest

  1. Open /platforms/android/app/build.gradle in a text editor to update the compile SDK version to 31:

open platforms/android/app/build.gradle

Your platforms/android/app/build.gradle file should look like this:

- compileSdkVersion = cordovaConfig.SDK_VERSION
+ compileSdkVersion = 31

Displaying a PDF

  1. Add the PDF document you want to display in your project’s www directory. You can use this Quickstart Guide PDF as an example.

cp ~/Downloads/Document.pdf platforms/android/app/src/main/assets/Document.pdf

  1. Present PSPDFKit from your codebase. You can do it from a button action, event handler, or similar:

const DOCUMENT = (window.cordova.platformId === "ios") ? "Document.pdf" : "file:///android_asset/Document.pdf";
PSPDFKit.present(DOCUMENT);

  1. Start your emulator.

  2. The app is now ready to launch! Go back to the terminal and run:

cordova emulate android

Next Steps

To learn more about Cordova, make sure to check out the following:

Warning

PSPDFKit Cordova is being sunset and will not receive future updates after 1 December 2025. It remains available as source code, should you want to maintain it yourself. All licenses will remain valid and fully supported until 1 December 2025, or until your license expires, whichever occurs later. Interested in transitioning to another Nutrient product? Contact us and we’ll be happy to help.

Requirements

Cloning the PSPDFKit-Demo Cordova Example Project

  1. Open the terminal and clone the GitHub repository:

git clone https://github.com/PSPDFKit/pspdfkit-cordova.git

  1. Change the current working directory to the example project’s folder:

cd pspdfkit-cordova/examples/cordova/PSPDFKit-Demo

  1. Install the dependencies:

npm install

  1. Add the Android platform:

cordova platform add android

  1. Open /platforms/android/app/build.gradle in a text editor to update the compile SDK version to 31:

open platforms/android/app/build.gradle

Your platforms/android/app/build.gradle file should look like this:

- compileSdkVersion = cordovaConfig.SDK_VERSION
+ compileSdkVersion = 31

  1. Copy the PDF document from the www directory into your project’s assets directory:

cp www/Document.pdf platforms/android/app/src/main/assets/Document.pdf

  1. Start your emulator.

  2. The app is now ready to launch:

cordova emulate android

Next Steps

To learn more about Cordova, make sure to check out the following:

Warning

PSPDFKit Cordova is being sunset and will not receive future updates after 1 December 2025. It remains available as source code, should you want to maintain it yourself. All licenses will remain valid and fully supported until 1 December 2025, or until your license expires, whichever occurs later. Interested in transitioning to another Nutrient product? Contact us and we’ll be happy to help.

Requirements

Creating a New Cordova Project

  1. In the terminal, change the current working directory to where you’ll save your project. This example uses the pdf folder created in the home directory:

mkdir ~/pdf
cd ~/pdf
cd /d %userprofile%
mkdir pdf
cd pdf

  1. Create the new Cordova project by running the following command:

cordova create PSPDFKit-Demo com.pspdfkit.demo PSPDFKit-Demo

Installing the PSPDFKit Cordova Dependency

  1. In the terminal, change the location of the current working directory inside the newly created project:

cd PSPDFKit-Demo

  1. Open config.xml in a text editor to enable AndroidX and to change the deployment target to iOS 15 or later:

open config.xml

Your config.xml file should look like this:

...
  <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="15.0" />
    ...
  </platform>
...

  1. Add the PSPDFKit plugin:

cordova plugin add https://github.com/PSPDFKit/PSPDFKit-Cordova.git

  1. Add the iOS platform:

cordova platform add ios@latest

Displaying a PDF

  1. Add the PDF document you want to display in your project’s www directory. You can use this Quickstart Guide PDF as an example.

cp ~/Downloads/Document.pdf www/Document.pdf

  1. Open the www/js/index.js file:

open www/js/index.js

  1. Modify the onDeviceReady function like so:

...
  onDeviceReady: function() {
    this.receivedEvent('deviceready');
+   const DOCUMENT = (window.cordova.platformId === "ios") ? "Document.pdf" : "file:///android_asset/Document.pdf";
+   PSPDFKit.present(DOCUMENT);
  },
...

  1. The app is now ready to launch! Go back to the terminal and run:

cordova emulate ios

Next Steps

To learn more about Cordova, make sure to check out the following:

Warning

PSPDFKit Cordova is being sunset and will not receive future updates after 1 December 2025. It remains available as source code, should you want to maintain it yourself. All licenses will remain valid and fully supported until 1 December 2025, or until your license expires, whichever occurs later. Interested in transitioning to another Nutrient product? Contact us and we’ll be happy to help.

Requirements

Installing the PSPDFKit Cordova Dependency

  1. Open the terminal and change the location of the current working directory inside your project:

cd path/to/YourProject

  1. Remove all the platforms from your project to properly propagate the changes in the config.xml file below throughout the project:

cordova platform remove android
cordova platform remove ios

  1. Open config.xml in a text editor to enable AndroidX and to change the deployment target to iOS 15 or later:

open config.xml

Your config.xml file should look like this:

...
  <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="15.0" />
    ...
  </platform>
...

  1. Add the PSPDFKit plugin:

cordova plugin add https://github.com/PSPDFKit/PSPDFKit-Cordova.git

  1. Add back all the platforms:

cordova platform add android@latest
cordova platform add ios@latest

  1. Open /platforms/android/app/build.gradle in a text editor to update the compile SDK version to 31:

open platforms/android/app/build.gradle

Your platforms/android/app/build.gradle file should look like this:

- compileSdkVersion = cordovaConfig.SDK_VERSION
+ compileSdkVersion = 31

Displaying a PDF

  1. Add the PDF document you want to display in your project’s www directory. You can use this Quickstart Guide PDF as an example.

cp ~/Downloads/Document.pdf www/Document.pdf

  1. Present PSPDFKit from your codebase. You can do it from a button action, event handler, or similar:

const DOCUMENT = (window.cordova.platformId === "ios") ? "Document.pdf" : "file:///android_asset/Document.pdf";
PSPDFKit.present(DOCUMENT);

  1. The app is now ready to launch! Go back to the terminal and run:

cordova emulate ios

Next Steps

To learn more about Cordova, make sure to check out the following:

Warning

PSPDFKit Cordova is being sunset and will not receive future updates after 1 December 2025. It remains available as source code, should you want to maintain it yourself. All licenses will remain valid and fully supported until 1 December 2025, or until your license expires, whichever occurs later. Interested in transitioning to another Nutrient product? Contact us and we’ll be happy to help.

Requirements

Cloning the PSPDFKit-Demo Cordova Example Project

  1. Open the terminal and clone the GitHub repository:

git clone https://github.com/PSPDFKit/pspdfkit-cordova.git

  1. Change the current working directory to the example project’s folder:

cd pspdfkit-cordova/examples/cordova/PSPDFKit-Demo

  1. Install the dependencies:

npm install

  1. Add the iOS platform:

cordova platform add ios

  1. The app is now ready to launch:

cordova emulate ios

Next Steps

To learn more about Cordova, make sure to check out the following: