@nativescript/pdf

A simple PDF viewer. It conveniently uses the iOS WKWebView, and for Android it uses AndroidPdfViewer.

Remark This repository is the replacement for madmas/nativescript-pdf-view which was a fork of the original by Merott and will be used with his consent to provide further maintenance of this NativeScript plugin.

Contents

Installation

npm install @nativescript/pdf

Android

If there is an error building ':app:mergeDebugNativeLibs', message 2 files found with path 'lib/arm64-v8a/libc++_shared.so', add this in your app.gradle file in the android {} section.

  packagingOptions {
    pickFirst 'lib/*/libc++_shared.so'
  }

Usage

Core

<Page
  xmlns="http://schemas.nativescript.org/tns.xsd"
  xmlns:pdf="@nativescript/pdf"
  loaded="pageLoaded"
>
  <pdf:PDFView src="{{ pdfUrl }}" load="{{ onLoad }}" />
</Page>

See the complete example at NativeScript TypeScript: pdf

Angular

import { NativeScriptPdfModule } from '@nativescript/pdf/angular'

@NgModule({
	imports: [
    NativeScriptCommonModule,
    ...
    NativeScriptPdfModule
  ],

<PDFView [src]="pdfUrl" (load)="onLoad()"></PDFView>

See the complete example at NativeScript Angular: pdf

Vue

  1. Register the component in the app.ts file.
registerElement('PDFView', () => require('@nativescript/pdf').PDFView)
  1. Then, use it in markup.
<PDFView :src="pdfUrl" row="1" />

Svelte

  1. Register the component in the app.ts file.
registerElement('pDFView', () => require('@nativescript/pdf').PDFView)
  1. Then, use it in markup.
 <pDFView src={ pdfUrl } row="1"></pDFView>

See the complete example NativeScript Svelte: pdf

React

  1. Register the component, in the app.ts file:
interface PDFViewAttributes extends ViewAttributes {
  src: string
}
declare global {
  module JSX {
    interface IntrinsicElements {
      pdfView: NativeScriptProps<PDFViewAttributes, PDFViewCommon>
    }
  }
}
registerElement('pdfView', () => require('@nativescript/pdf').PDFView)
  1. Use it in markup as follows:
<gridLayout class="px-5" columns="*" rows="auto, *">

  <button
      height="70"
      text="Show Another!"
      class="text-[#76ABEB] font-bold mt-8 mb-5 text-lg"
      onTap={this.changePDF}
  >
  </button>

  <pdfView src={this.state.pdfUrl} row="1" onLoaded={this.onLoaded}></pdfView>
</gridLayout>

You can find the complete example at StackBlitz here.

PDFView API

loadEvent

PDFView.loadEvent

src

pdfView.src = 'some-pdf-url'

Sets the src of the a pdf file


notifyOfEvent()

PDFView.notifyOfEvent(eventName: string, pdfViewRef: WeakRef<Common>)

loadPDF()

pdfView.loadPDF(src)

Loads the PDF file at the specified source.