Getting started on Cordova

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:

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:

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:

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:

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:

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: