Skip to content

TeamMaestro/nativescript-pspdfkit

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

67 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Nativescript PSPDFKit

npm npm

NativeScript implementation of PSPDFKit (https://pspdfkit.com/). Currently for iOS only, Android support is coming soon.

Please note that this plugin is not production ready. You will have to fork this project to get your licensed version POD installed correctly (currently).

Installation

npm install nativescript-pspdfkit

Example Implementation

Android

Modify the activity entry within the AndroidManifest.xml file found in the app/App_Resources/Android/ folder

<activity
        android:name="com.github.TeamMaestro.TNSFragmentActivity"
        android:label="@string/title_activity_kimera"
        android:configChanges="keyboardHidden|orientation|screenSize">

        <activity android:name="com.pspdfkit.ui.PdfActivity" android:windowSoftInputMode="adjustNothing" />
        <meta-data android:name="pspdfkit_license_key" android:value="youKey"/>

Modify the defaultConfig entry within the app.gradle file found in the app/App_Resources/Android/ folder

defaultConfig {
    minSdkVersion 19
import {TNSPSPDFKit} from 'nativescript-pspdfkit';
let licenseKey = '';
let pspdfkit = new TNSPSPDFKit(licenseKey);
/*
 TNSPSPDFKitOptions {
  scrollDirection?: 'vertical' | 'horizontal';
  backgroundColor?: string;
  spreadFitting?: 'adaptive' | 'fit' | 'fill';
  thumbnailBar?: 'scrollable' | 'scrubber' | 'none';
  scrubberBar?: 'verticalRight' | 'verticalLeft';
  thumbnailSize?: string;
  pageMode?: 'automatic' | 'single' | 'double';
  minZoom?: number;
  maxZoom?: number;
}

*/
pspdfkit.display('~/example.pdf',{ scrollDirection: 'vertical' });

IMPORTANT: Make sure you include xmlns:pspdfkit="nativescript-pspdfkit" on the Page tag

<pdfView:TNSPSPDFView scrollDirection="horizontal" scrubberBar="verticalRight" thumbnailBar="scrubber" spreadFitting="fill" src="~/example.pdf"/>

Angular

import { TNSPSPDFView } from 'nativescript-pspdfkit';
import { registerElement } from "nativescript-angular/element-registry";
registerElement("TNSPSPDFView", () => require("nativescript-pspdfkit").TNSPSPDFView);
<TNSPSPDFView selectedIndexChange="pageChanged" scrollDirection="horizontal" scrubberBar="verticalRight" thumbnailBar="scrubber" spreadFitting="fill" src="~/example.pdf"></TNSPSPDFView>

Webpack Setup worker loader -> link

API

Property Default Type Required Description
scrollDirection vertical string
scrubberBar horizontal string
thumbnailBar none boolean
spreadFitting "adaptive" string
thumbnailSize Defaults to 88x125 on iPad and 53x75 on iPhone string
pageMode automatic string
minZoom 1 number
maxZoom 20 number
searchResultZoom 2 number
formsEnabled true boolean
src null string

Example Image

IOS Android
IOS Android