Getting Started on Ionic

Requirements

Creating a New Ionic 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 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 13 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="13.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

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:

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 13 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="13.0" />
    ...
  </platform>
...
  1. Add back all the platforms:

ionic cordova platform add android
ionic cordova platform add ios
  1. Add the PSPDFKit plugin:

ionic cordova plugin add https://github.com/PSPDFKit/PSPDFKit-Cordova.git
  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:

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

Requirements

Creating a New Ionic 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 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 13 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="13.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

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:

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 13 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="13.0" />
    ...
  </platform>
...
  1. Add back all the platforms:

ionic cordova platform add android
ionic cordova platform add ios
  1. Add the PSPDFKit plugin:

ionic cordova plugin add https://github.com/PSPDFKit/PSPDFKit-Cordova.git
  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:

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: