@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

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"></PDFView>

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.