Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@nativescript/pdf) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

Installation
Usage
- Core
- Angular
- Vue
- Svelte
- React
PDFView API

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

registerElement('PDFView', () => require('@nativescript/pdf').PDFView);

Then, use it in markup.

 <PDFView :src="pdfUrl" row="1"></PDFView>

Svelte

registerElement('pDFView', () => require('@nativescript/pdf').PDFView);

Then, use it in markup.

 <pDFView src={ pdfUrl } row="1"></pDFView>

See the complete example NativeScript Svelte: pdf

React

interface PDFViewAttributes extends ViewAttributes {
src:string;
}
declare global {
    module JSX {
        interface IntrinsicElements {
          
          pdfView: NativeScriptProps<PDFViewAttributes, PDFViewCommon>
            
        }
    }
}
registerElement("pdfView", ()=> require("@nativescript/pdf").PDFView)

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.