Skip to content

Latest commit

 

History

History
170 lines (122 loc) · 3.75 KB

README.md

File metadata and controls

170 lines (122 loc) · 3.75 KB
Raw

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

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.