Requirements

• The latest stable version of Node.js

• The latest stable version of Ionic CLI

• The latest stable version of cordova-res

• The Java Development Kit (JDK) 11

• The latest stable version of Android Studio

• The Android NDK

• An Android Virtual Device or a hardware device

Creating a New Ionic 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

2. Create the new Ionic project by running the following command:

ionic start PSPDFKit-Demo blank tabs --cordova --type=angular

Installing the PSPDFKit Ionic Dependency

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

cd PSPDFKit-Demo

2. Add the PSPDFKit plugin:

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

3. 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">
-    <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application" xmlns:android="http://schemas.android.com/apk/res/android">
-       <application android:networkSecurityConfig="@xml/network_security_config" />
-    </edit-config>
+   <preference name="AndroidXEnabled" value="true" />
    ...
  </platform>
  <platform name="ios">
    <allow-intent href="itms:*" />
    <allow-intent href="itms-apps:*" />
+   <allow-navigation href="*" />
+   <preference name="deployment-target" value="15.0" />
    ...
  </platform>
...

4. Declare PSPDFKit in the src/declarations.d.ts file:

echo "declare var PSPDFKit: any;" >> src/declarations.d.ts

Your src/declarations.d.ts file should look like this:

...
declare var PSPDFKit: any;

5. Add the Android platform:

ionic cordova platform add android@latest

6. 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

7. Remove the cordova-plugin-whitelist plugin because it was deprecated in template version 6.0.0:

ionic cordova plugin rm cordova-plugin-whitelist

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

2. Open the src/app/app.component.ts file:

open src/app/app.component.ts

3. Replace the entire contents of the app.component.ts file with the following code snippet:

import { Component } from "@angular/core";
import { Platform } from "@ionic/angular";

@Component({
  selector: "app-root",
  templateUrl: "app.component.html",
  styleUrls: ["app.component.scss"],
})
export class AppComponent {
  constructor(private platform: Platform) {
    this.platform.ready().then(() => {
      const DOCUMENT = this.platform.is("ios")
        ? "Document.pdf"
        : "file:///android_asset/Document.pdf";
      PSPDFKit.present(DOCUMENT);
    });
  }
}

4. Start your emulator.

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

ionic cordova emulate android

Next Steps

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

• How to Manipulate Annotations Programmatically in Cordova

Requirements

• The latest stable version of Node.js

• The latest stable version of Ionic CLI

• The latest stable version of cordova-res

• The Java Development Kit (JDK) 11

• The latest stable version of Android Studio

• The Android NDK

• An Android Virtual Device or a hardware device

• An existing Ionic project that runs on Android using the latest version of Ionic

Installing the PSPDFKit Ionic Dependency

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

cd path/to/YourProject

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

ionic cordova platform remove android
ionic cordova platform remove ios

3. 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">
-    <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application" xmlns:android="http://schemas.android.com/apk/res/android">
-       <application android:networkSecurityConfig="@xml/network_security_config" />
-    </edit-config>
+   <preference name="AndroidXEnabled" value="true" />
    ...
  </platform>
  <platform name="ios">
    <allow-intent href="itms:*" />
    <allow-intent href="itms-apps:*" />
+   <allow-navigation href="*" />
+   <preference name="deployment-target" value="15.0" />
    ...
  </platform>
...

4. Add back all the platforms:

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

5. 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

6. Add the PSPDFKit plugin:

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

7. Remove the cordova-plugin-whitelist plugin because it was deprecated in template version 6.0.0:

ionic cordova plugin rm cordova-plugin-whitelist

8. Declare PSPDFKit in the src/declarations.d.ts file:

echo "declare var PSPDFKit: any;" >> src/declarations.d.ts

Your src/declarations.d.ts file should look like this:

...
declare var PSPDFKit: any;

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

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

const DOCUMENT = this.platform.is("ios")
  ? "Document.pdf"
  : "file:///android_asset/Document.pdf";
PSPDFKit.present(DOCUMENT);

3. Start your emulator.

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

ionic cordova emulate android

Next Steps

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

• How to Manipulate Annotations Programmatically in Cordova

Requirements

• The latest stable version of Node.js

• The latest stable version of Ionic CLI

• The latest stable version of cordova-res

• The Java Development Kit (JDK) 11

• The latest stable version of Android Studio

• The Android NDK

• An Android Virtual Device or a hardware device

Cloning the PSPDFKit-Demo Ionic Example Project

1. Open the terminal and clone the GitHub repository:

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

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

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

3. Install the dependencies:

npm install

4. Add the Android platform:

ionic cordova platform add android

5. 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

6. Copy the PDF document from the resources directory into your project’s assets directory:

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

7. Start your emulator.

8. The app is now ready to launch:

ionic cordova emulate android

Next Steps

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

• How to Manipulate Annotations Programmatically in Cordova

Requirements

• The latest stable version of Node.js

• The latest stable version of Ionic CLI

• The latest stable version of cordova-res

• The latest stable version of Xcode

• The latest stable version of CocoaPods. If you don’t already have CocoaPods installed, follow the CocoaPods installation guide to install CocoaPods on your Mac.

Creating a New Ionic 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

2. Create the new Ionic project by running the following command:

ionic start PSPDFKit-Demo blank tabs --cordova --type=angular

Installing the PSPDFKit Ionic Dependency

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

cd PSPDFKit-Demo

2. Add the PSPDFKit plugin:

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

3. 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">
-    <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application" xmlns:android="http://schemas.android.com/apk/res/android">
-       <application android:networkSecurityConfig="@xml/network_security_config" />
-    </edit-config>
+   <preference name="AndroidXEnabled" value="true" />
    ...
  </platform>
  <platform name="ios">
    <allow-intent href="itms:*" />
    <allow-intent href="itms-apps:*" />
+   <allow-navigation href="*" />
+   <preference name="deployment-target" value="15.0" />
    ...
  </platform>
...

4. Declare PSPDFKit in the src/declarations.d.ts file:

echo "declare var PSPDFKit: any;" >> src/declarations.d.ts

Your src/declarations.d.ts file should look like this:

...
declare var PSPDFKit: any;

5. Add the iOS platform:

ionic cordova platform add ios@latest

6. Remove the cordova-plugin-whitelist plugin because it was deprecated in template version 6.0.0:

ionic cordova plugin rm cordova-plugin-whitelist

Displaying a PDF

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

cp ~/Downloads/Document.pdf platforms/ios/platform_www/Document.pdf

2. Open the src/app/app.component.ts file:

open src/app/app.component.ts

3. Replace the entire contents of the app.component.ts file with the following code snippet:

import { Component } from "@angular/core";
import { Platform } from "@ionic/angular";

@Component({
  selector: "app-root",
  templateUrl: "app.component.html",
  styleUrls: ["app.component.scss"],
})
export class AppComponent {
  constructor(private platform: Platform) {
    this.platform.ready().then(() => {
      const DOCUMENT = this.platform.is("ios")
        ? "Document.pdf"
        : "file:///android_asset/Document.pdf";
      PSPDFKit.present(DOCUMENT);
    });
  }
}

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

ionic cordova emulate ios

Next Steps

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

• How to Manipulate Annotations Programmatically in Cordova

• How to Expose Native iOS APIs to Cordova

Requirements

• The latest stable version of Node.js

• The latest stable version of Ionic CLI

• The latest stable version of cordova-res

• The latest stable version of Xcode

• The latest stable version of CocoaPods. You can check your version of CocoaPods with pod --version.

• An existing Ionic project that runs on iOS using the latest version of Ionic

Installing the PSPDFKit Ionic Dependency

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

cd path/to/YourProject

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

ionic cordova platform remove android
ionic cordova platform remove ios

3. 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">
-    <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application" xmlns:android="http://schemas.android.com/apk/res/android">
-       <application android:networkSecurityConfig="@xml/network_security_config" />
-    </edit-config>
+   <preference name="AndroidXEnabled" value="true" />
    ...
  </platform>
  <platform name="ios">
    <allow-intent href="itms:*" />
    <allow-intent href="itms-apps:*" />
+   <allow-navigation href="*" />
+   <preference name="deployment-target" value="15.0" />
    ...
  </platform>
...

4. Add back all the platforms:

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

5. 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

6. Add the PSPDFKit plugin:

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

7. Remove the cordova-plugin-whitelist plugin because it was deprecated in template version 6.0.0:

ionic cordova plugin rm cordova-plugin-whitelist

8. Declare PSPDFKit in the src/declarations.d.ts file:

echo "declare var PSPDFKit: any;" >> src/declarations.d.ts

Your src/declarations.d.ts file should look like this:

...
declare var PSPDFKit: any;

Displaying a PDF

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

cp ~/Downloads/Document.pdf platforms/ios/platform_www/Document.pdf

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

const DOCUMENT = this.platform.is("ios")
  ? "Document.pdf"
  : "file:///android_asset/Document.pdf";
PSPDFKit.present(DOCUMENT);

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

ionic cordova emulate ios

Next Steps

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

• How to Manipulate Annotations Programmatically in Cordova

• How to Expose Native iOS APIs to Cordova

Requirements

• The latest stable version of Node.js

• The latest stable version of Ionic CLI

• The latest stable version of cordova-res

• The latest stable version of Xcode

• The latest stable version of CocoaPods. You can check your version of CocoaPods with pod --version.

Cloning the PSPDFKit-Demo Ionic Example Project

1. Open the terminal and clone the GitHub repository:

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

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

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

3. Install the dependencies:

npm install

4. Add the iOS platform:

ionic cordova platform add ios

5. Copy the PDF document from the resources directory into your project’s platform_www directory:

cp resources/Document.pdf platforms/ios/platform_www/

6. The app is now ready to launch:

ionic cordova emulate ios

Next Steps

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

• How to Manipulate Annotations Programmatically in Cordova

• How to Expose Native iOS APIs to Cordova