Getting started on Ionic

Warning

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

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

  1. Add the PSPDFKit plugin:

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

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

  1. 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;

  1. Add the Android platform:

ionic 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

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

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

open src/app/app.component.ts

  1. 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);
    });
  }
}

  1. Start your emulator.

  2. 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:

Warning

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

ionic cordova platform remove android
ionic 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">
-    <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>
...

  1. Add back all the platforms:

ionic cordova platform add android@latest
ionic 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

  1. Add the PSPDFKit plugin:

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

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

ionic cordova plugin rm cordova-plugin-whitelist

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

  1. 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);

  1. Start your emulator.

  2. 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:

Warning

PSPDFKit Ionic 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 Ionic 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/ionic/PSPDFKit-Demo

  1. Install the dependencies:

npm install

  1. Add the Android platform:

ionic 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 resources directory into your project’s assets directory:

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

  1. Start your emulator.

  2. 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:

Warning

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

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

  1. Add the PSPDFKit plugin:

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

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

  1. 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;

  1. Add the iOS platform:

ionic cordova platform add ios@latest

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

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

open src/app/app.component.ts

  1. 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);
    });
  }
}

  1. 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:

Warning

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

ionic cordova platform remove android
ionic 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">
-    <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>
...

  1. Add back all the platforms:

ionic cordova platform add android@latest
ionic 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

  1. Add the PSPDFKit plugin:

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

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

ionic cordova plugin rm cordova-plugin-whitelist

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

  1. 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);

  1. 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:

Warning

PSPDFKit Ionic 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 Ionic 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/ionic/PSPDFKit-Demo

  1. Install the dependencies:

npm install

  1. Add the iOS platform:

ionic cordova platform add ios

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

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

  1. 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: