PDF

@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
• Usage
  • Core
  • Angular
  • Vue
  • Svelte
  • React
• PDFView API
  • loadEvent
  • src
  • notifyOfEvent()
  • loadPDF()

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)

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

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

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