Getting Started on Cordova

Requirements

Creating a New Cordova Project

  1. In the terminal, change the current working directory to the location you wish to save your project. In this example, we’ll use the ~/Documents/ directory:

cd ~/Documents
  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 13 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="13.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

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

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. 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 the location you wish to save your project. In this example, we’ll use the ~/Documents/ directory:

cd ~/Documents
  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 13 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="13.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 13 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="13.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

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: