The PSPDFKit SDK is a framework that allows you to view, annotate, sign, and fill PDF forms on iOS, Android, Windows, macOS, and Web. PSPDFKit Instant adds real-time collaboration features to seamlessly share, edit, and annotate PDF documents.
PSPDFKit comes with open source wrappers for Cordova on both iOS and Android. These wrappers also work for being used with the Ionic framework.
This plugin defines a global PSPDFKit
object, which provides an API for viewing PDF documents with PSPDFKit for Android.
cordova plugin add https://github.com/PSPDFKit/Cordova-Android.git
ionic cordova plugin add https://github.com/PSPDFKit/Cordova-Android.git
function showMyDocument() {
PSPDFKit.showDocumentFromAssets("www/documents/myFile.pdf", {
title: "My PDF Document",
page: 4,
scrollDirection: PSPDFKit.PageScrollDirection.VERTICAL,
scrollMode: PSPDFKit.ScrollMode.CONTINUOUS,
useImmersiveMode: true,
password: "my-document-password"
});
}
Opens a document from the local device storage.
PSPDFKit.showDocument(uri, options, success, fail);
Opens a document from the app's asset directory. To package a file within your app's assets, put it into the www/
directory of your project.
PSPDFKit.showDocumentFromAssets(assetPath, options, success, fail);
- Android SDK API level 19+ / Android 4.4+ (KitKat)
- Cordova Android 8+.
You can use the options
parameter to configure PSPDFKit. Here is a list of valid configuration options. You can omit option entries to use their default value, or pass in an empty options object {}
to keep all default settings.
var options {
backgroundColor: '#EFEFEF', // hex-color of the page background
disableAnnotationList: true, // hide annotation list (default: false)
disableAnnotationNoteHinting: true, // hide small notes next to annotations that have a text set (default: false)
disableBookmarkEditing: true, // hide bookmark editing (default: false)
disableBookmarkList: true, // hide bookmark list (default: false)
disableCopyPaste: true, // disable annotation copy/paste (default: false)
disableDocumentEditor: true, // hide document editor (default: false)
disableOutline: true, // hide the outline menu (default: false)
disablePrinting: true, // hide option to print (default: false)
disableUndoRedo: true, // disable undo/redo system (default: false)
hidePageLabels: true, // hide page labels (if available in PDF) in page overlay and thumbnail grid (default: false)
hidePageNumberOverlay: false, // hide the overlay showing the current page (default: false)
hideSettingsMenu: false, // hide the settings menu (default: false)
thumbnailBarMode: PSPDFKit.ThumbnailBarMode.THUMBNAIL_BAR_MODE_DEFAULT, // show static thumbnail bar. Also valid: THUMBNAIL_BAR_MODE_DEFAULT, THUMBNAIL_BAR_MODE_SCROLLABLE
hideThumbnailGrid: false, // hide the thumbnail grid menu (default: false)
pageFitMode: PSPDFKit.PageFitMode.FIT_TO_WIDTH, // also valid: PSPDFKit.PageFitMode.FIT_TO_SCREEN
scrollDirection: PSPDFKit.PageScrollDirection.VERTICAL, // also valid: PSPDFKit.PageScrollDirection.HORIZONTAL
scrollMode: PSPDFKit.ScrollMode.CONTINUOUS, // also valid: PSPDFKit.ScrollMode.PER_PAGE
// Configures which share actions should be visible in the user interface. (default: all enabled)
shareFeatures: [
/** Document sharing inside the activity. */
PSPDFKit.ShareFeatures.DOCUMENT_SHARING,
/** Sharing of embedded files (on file annotations). */
PSPDFKit.ShareFeatures.EMBEDDED_FILE_SHARING,
/** Sharing of text from selected free text annotations. */
PSPDFKit.ShareFeatures.FREE_TEXT_ANNOTATION_SHARING,
/** Sharing of selected image annotations. */
PSPDFKit.ShareFeatures.IMAGE_SHARING,
/** Sharing of text from selected note annotations. */
PSPDFKit.ShareFeatures.NOTE_ANNOTATION_SHARING,
/** Sharing of text from annotation contents or comments. */
PSPDFKit.ShareFeatures.NOTE_EDITOR_CONTENT_SHARING,
/** Sharing of selected text. */
PSPDFKit.ShareFeatures.TEXT_SELECTION_SHARING
],
invertColors: false, // invert rendered colors (default: false)
toGrayscale: true, // render document in grayscale only (default: false)
title: "My PSPDFKit app", // title displayed in the viewer action bar
startZoomScale: 2.0, // initial zoom value (default: 1.0)
maxZoomScale: 10.0, // maximum zoom factor when zooming into a page (default: 15.0)
zoomOutBounce: false, // "bounce" animation when pinch-zooming out (default: true)
page: 2, // initial page number (default: 0, i.e. the first page)
useImmersiveMode: true, // activate Android's immersive app mode (default: false)
disableSearch: false, // completely deactivate document search (default: false)
searchType: PSPDFKit.SearchType.SEARCH_MODULAR, // also valid: PSPDFKit.SearchType.SEARCH_INLINE
autosaveEnabled: true, // automatically save document changes on exit (default: true)
annotationEditing: {
enabled: true, // activate annotation editing (default: true)
creatorName: 'John Doe' // author name written into new annotations (default: null)
},
password: "my-document-password" // use this to open encrypted PDF files
};
PSPDFKit.showDocumentFromAssets('www/documents/myFile.pdf', options);
Create a new Apache Cordova project from your command line using the Apache Cordova Command-Line Interface (CLI).
cordova create pdfapp com.example.pdfapp PDF-App
cd pdfapp
Important: Your app's package name (in the above example
com.example.pdfapp
) has to match your PSPDFKit license name or PSPDFKit will throw an exception. If you don't have a license yet, you can request an evaluation license of PSPDFKit at https://pspdfkit.com/try.
Add Android platform support to your project. This plugin requires the latest cordova-android
plugin 8+.
cordova platform add android@8.0.0
Install the PSPDFKit plugin:
cordova plugin add https://github.com/PSPDFKit/Cordova-Android.git
Next you need to setup your PSPDFKit license key and Maven password. If you don't have a license key or Maven password yet, you can get them by requesting an evaluation version of PSPDFKit at https://pspdfkit.com/try. Inside your Android app's platforms/android/local.properties
file, specify the pspdfkit.password
and pspdfkit.license
properties.:
# This is the MAVEN_KEY you received when requesting a demo or from the customer portal.
pspdfkit.password=YOUR_PASSWORD
# This is the LICENSE_KEY you received when requesting a demo or from the customer portal.
pspdfkit.license=LICENSE_STRING
Note: If you're already a customer then please make sure that the package ID matches with your bundle ID that's assigned to your license (e.g. com.ionic.test). You can check this in your
AndroidManifest.xml
by searching forpackage
. If you are using a trial license then you don't have to worry about that.
Now open your index.js
file located in www/js/
and paste the below code into the receivedEvent: function(id)
function. For this to work you need to create a folder called documents
in wwww
and paste a PDF in this folder.
PSPDFKit.showDocumentFromAssets("www/documents/A.pdf", {
title: "My PDF Document",
page: 0,
scrollDirection: PSPDFKit.PageScrollDirection.VERTICAL,
scrollMode: PSPDFKit.ScrollMode.CONTINUOUS,
useImmersiveMode: true
});
You are now ready to build and test your app!
cordova build
cordova run
For more information regarding the Ionic installation you can check out the official Ionic installation guide.
Create a new Ionic project from the command line using the Ionic Command-Line Interface (CLI) .
ionic start todo blank --type ionic1
It will then ask you if you want to integrate your new app with Cordova, answer with yes. After the process is finished change to the newly created Ionic project directory.
cd todo
Add Android platform support to your project. This plugin requires the latest cordova-android
plugin 8+.
ionic cordova platform add android@8.0.0
Install the PSPDFKit plugin:
ionic cordova plugin add https://github.com/PSPDFKit/Cordova-Android.git
Next you need to setup your PSPDFKit license key and Maven password. If you don't have a license key or Maven password yet, you can get them by requesting an evaluation version of PSPDFKit at https://pspdfkit.com/try. Specify the pspdfkit.password
and pspdfkit.license
properties inside your Android app's platforms/android/local.properties
file, create the file if it does not exist:
pspdfkit.password=YOUR_PASSWORD
pspdfkit.license=LICENSE_STRING
Note: If you're already a customer then please make sure that the package ID matches with your bundle ID that's assigned to your license (e.g. com.ionic.test). You can check this in your
AndroidManifest.xml
by searching forpackage
. If you are using a trial license then you don't have to worry about that.
Now open your app.js
file located in www/js/
and paste the below code into the $ionicPlatform.ready(function() {}
function. For this to work you need to create a folder called documents
in wwww
and paste a PDF in this folder.
PSPDFKit.showDocumentFromAssets("www/documents/Document.pdf", {
title: "My PDF Document",
page: 0,
scrollDirection: PSPDFKit.PageScrollDirection.VERTICAL,
scrollMode: PSPDFKit.ScrollMode.CONTINUOUS,
useImmersiveMode: true
});
Now you need to build the app to see if everything works correctly:
ionic cordova build
And finally to run the app on a real device simply enter:
ionic cordova run android
Or if you want to run the app on a simulator you can use:
ionic cordova emulate android
Below is a screenshot of how the project structure should look like if it's a working project. All folders with important files that need to be adapted are open in the screenshot. If it doesn't look like this then there is a high chance that the guide wasn't properly followed which will also lead to the project not working.
.
├── platforms
│ ├── android
│ │ ├── app
│ │ │ └── src
│ │ │ └── main
│ │ │ └── AndroidManifest.xml
│ │ ├── pspdfkit-cordova-android
│ │ │ └── starter-pspdfkit.gradle
│ │ ├── gradle.properties
│ │ └── local.properties
└── www
├── documents
│ └── A.pdf
├── index.html
└── js
├── app.js (only for Ionic)
└── index.js (only for Cordova)
Documentation on currently available API is provided in PSPDFKit.js.
To get proper error reporting for JavaScript exceptions, you need to register a global error listener which will print most runtime errors to Logcat.
Put the following code snippet into [your-project]/platforms/android/app/src/main/assets/www/js/index.js
:
window.onerror = function(msg, url, line, col, error) {
var extra = !col ? '' : '\ncolumn: ' + col;
extra += !error ? '' : '\nerror: ' + error;
console.log("ErrorReport: " + msg + "\nurl: " + url + "\nline: " + line + extra);
return true;
};
When running cordova build
for a project with multiple plugins installed, it can happen that you see a build error like this:
* What went wrong:
Execution failed for task ':app:transformClassesWithMultidexlistForDebug'.
> com.android.build.api.transform.TransformException: Error while generating the main dex list.
The most common cause for this error is that your Cordova/Ionic project uses plugins that haven't yet migrated to AndroidX, but still use the old Android Support Library. Here's how to work around this issue:
-
Install the
cordova-plugin-androidx
plugin, which will configure your project to use AndroidX.cordova plugin add cordova-plugin-androidx
-
Install the
cordova-plugin-androidx-adapter
plugin, which will enable auto-migration of all outdated Cordova plugins, so that they also use AndroidX instead of the Support Library.cordova plugin add cordova-plugin-androidx-adapter
-
Run
cordova build
. This will process and update all third-party plugins to use AndroidX, and will then build your project.
In some cases, it might occur that Cordova fails adding the required <activity/>
entry to your app's AndroidManifest.xml
. If this is the case, you will see an error message like this when trying to show a PDF document:
05-23 21:55:40.214 20912-20982/com.example.app E/PluginManager: Uncaught exception from plugin
android.content.ActivityNotFoundException: Unable to find explicit activity class {com.example.app/com.pspdfkit.ui.PdfActivity}; have you declared this activity in your AndroidManifest.xml?
at android.app.Instrumentation.checkStartActivityResult(Instrumentation.java:1854)
at android.app.Instrumentation.execStartActivity(Instrumentation.java:1545)
at android.app.Activity.startActivityForResult(Activity.java:4283)
at org.apache.cordova.CordovaActivity.startActivityForResult(CordovaActivity.java:342)
at android.app.Activity.startActivityForResult(Activity.java:4230)
at android.app.Activity.startActivity(Activity.java:4567)
at android.app.Activity.startActivity(Activity.java:4535)
at com.pspdfkit.ui.PdfActivity.showDocument(SourceFile:113)
at com.pspdfkit.cordova.PSPDFKitCordovaPlugin.showDocumentForUri(PSPDFKitCordovaPlugin.java:253)
at com.pspdfkit.cordova.PSPDFKitCordovaPlugin.showDocument(PSPDFKitCordovaPlugin.java:227)
at com.pspdfkit.cordova.PSPDFKitCordovaPlugin.execute(PSPDFKitCordovaPlugin.java:85)
at org.apache.cordova.CordovaPlugin.execute(CordovaPlugin.java:98)
at org.apache.cordova.PluginManager.exec(PluginManager.java:132)
at org.apache.cordova.CordovaBridge.jsExec(CordovaBridge.java:57)
at org.apache.cordova.engine.SystemExposedJsApi.exec(SystemExposedJsApi.java:41)
at org.chromium.base.SystemMessageHandler.nativeDoRunLoopOnce(Native Method)
at org.chromium.base.SystemMessageHandler.handleMessage(SystemMessageHandler.java:9)
at android.os.Handler.dispatchMessage(Handler.java:102)
at android.os.Looper.loop(Looper.java:158)
at android.os.HandlerThread.run(HandlerThread.java:61)
To fix the issue, you need to manually add following entry to your AndroidManifest.xml
, usually located at <your-project>/platforms/android/app/src/main/AndroidManifest.xml
:
<manifest ...>
<application ...>
...
<!-- Add this entry if it is missing inside the manifest file. -->
<activity android:name="com.pspdfkit.ui.PdfActivity" android:theme="@style/PSPDFKit.Theme" android:windowSoftInputMode="adjustNothing" />
</application>
</manifest>
The entry needs to be inside the existing <application></application>
tags and should be added without removing any other entries that already exist. After recompiling and re-running the application, the error should be gone and PDF files should be properly displayed.
If you want to lock the device orientation to, for example, portrait mode, you can do this by specifying the android:screenOrientation
attribute on the PdfActivity
inside your app's AndroidManifest.xml
. However, since Cordova will always regenerate the AndroidManifest.xml
at build time, you can't manually change the existing activity entry in the XML.
-
Specify the extra
android:screenOrientation
attribute forPdfActivity
inside your app'sconfig.xml
:<widget id="com.example.app" ...> ... <!-- Add this to the end of your configuration to set the screen orientation inside PDFs. --> <edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application/activity[@android:name='com.pspdfkit.ui.PdfActivity']"> <!-- This will lock the screen orientation to portrait mode. --> <activity android:screenOrientation="portrait" /> </edit-config> </widget>
For the complete list of screen orientations supported by Android, check out the official Android documentation: https://developer.android.com/guide/topics/manifest/activity-element#screen
-
From the command line, run
cordova prepare
to update theAndroidManifest.xml
. -
Open the
platforms/android/app/src/main/AndroidManifest.xml
file and ensure that theandroid:screenOrientation
attribute was properly added to the existingPdfActivity
declaration.
Sometimes when running the app on the device again an error can occur which says:
Error: adb: Command failed with exit code 1 Error output:
adb: failed to install /Users/christoph/Downloads/todo/platforms/android/app/build/outputs/apk/debug/app-debug.apk: Failure [INSTALL_FAILED_VERSION_DOWNGRADE]
To solve this just uninstall the existing app from your device. To be 100% sure you can got the Settings -> Apps and delete the app for all users.
Please make sure that your license key is properly set in the AndroidManifest.xml
! You can also open a new terminal window and type adb logcat
to see exactly what's happening on your device. When searching for "PSPDFKit" you should be able to search for the error rather easily.
Example:
* What went wrong:
Could not resolve all files for configuration ':app:debugCompileClasspath'.
> Could not find support-media-compat.aar (com.android.support:support-media-compat:26.0.2).
Searched in the following locations:
https://jcenter.bintray.com/com/android/support/support-media-compat/26.0.2/support-media-compat-26.0.2.aar
Simply open your platforms/android/pspdfkit-cordova-android/YOURAPP-pspdfkit.gradle
file and change the version. In this case changing 26.0.2
to 26.0.1
can already fix such issues because sometimes specific support library versions are not available anymore.
If you are using newer versions of Ionic (for example Ionic 3 with Angular) together with the TypeScript language, you will probably see build errors similar to this:
ERROR in src/app/app.component.ts(27,7): error TS2304: Cannot find name 'PSPDFKit'.
src/app/app.component.ts(30,26): error TS2304: Cannot find name 'PSPDFKit'.
src/app/app.component.ts(31,21): error TS2304: Cannot find name 'PSPDFKit'.
Since TypeScript is a type-safe language, and the Cordova-Android
plugin is written for JavaScript, you need to manually define the PSPDFKit
type inside your application. The easiest way to do this is to add following line to your app.components.ts
file, or any other suitable TypeScript file in your app:
// import statements should go first
declare var PSPDFKit: any;
Please ensure you signed our CLA so we can accept your contributions.