|
1 | | -# nativescript-pdf-view |
| 1 | +# NativeScript PDFView |
2 | 2 |
|
3 | | -This is a very basic PDF view implementation that does only one thing, and |
4 | | -that is to display PDF files. It conveniently uses the iOS `UIWebView`, but |
5 | | -for Android it uses [AndroidPdfViewer](https://github.com/barteksc/AndroidPdfViewer). |
| 3 | +A minimal PDF view implementation that does only one thing, and that is to display PDF files in the simplest way possible. It conveniently uses the iOS `WKWebView`, and for Android it uses [`AndroidPdfViewer`](https://github.com/barteksc/AndroidPdfViewer). |
6 | 4 |
|
7 | | -This plugin does the bare minimum required to render the PDF, no configuration |
8 | | -options, and no error handling have been built yet. I welcome all Pull Requests! |
| 5 | +This plugin does the bare minimum required to render the PDF, no configuration options, and no error handling have been built yet. I welcome all Pull Requests! |
9 | 6 |
|
10 | | -# Usage |
| 7 | +My aim is to keep the features consistent across iOS and Android. |
11 | 8 |
|
12 | | -## |
| 9 | +## Installation |
13 | 10 |
|
14 | | -Check out the [demo](./demo) folder for a sample usage. |
| 11 | +``` |
| 12 | +tns plugin add nativescript-pdf-view |
| 13 | +``` |
15 | 14 |
|
16 | | -## Angular 2 |
| 15 | +## Usage |
17 | 16 |
|
18 | | -If you're using the plugin with Angular 2, the plugin automatically registers |
19 | | -`PDFView` as a valid tag for Angular templates. Usage is simple: |
| 17 | +### Vanilla NativeScript |
20 | 18 |
|
21 | | -1. Make sure to import `nativescript-pdf-view` somewhere in your code, e.g: |
| 19 | +```xml |
| 20 | +<Page |
| 21 | + xmlns="http://schemas.nativescript.org/tns.xsd" |
| 22 | + xmlns:pdf="nativescript-pdf-view" |
| 23 | + loaded="pageLoaded"> |
| 24 | + <pdf:PDFView src="{{ pdfUrl }}" load="{{ onLoad }}" /> |
| 25 | +</Page> |
| 26 | +``` |
22 | 27 |
|
23 | | - ```ts |
24 | | - import 'nativescript-pdf-view'; |
25 | | - ``` |
| 28 | +### Angular NativeScript |
26 | 29 |
|
27 | | -2. Include the tag in your template: |
| 30 | +```ts |
| 31 | +import { PDFView } from 'nativescript-pdf-view'; |
| 32 | +import { registerElement } from 'nativescript-angular'; |
| 33 | +registerElement('PDFView', () => PDFView); |
| 34 | +``` |
28 | 35 |
|
29 | | - ```html |
30 | | - <PDFView [src]="src" (load)="onLoad()"></PDFView> |
31 | | - ``` |
| 36 | +```html |
| 37 | +<PDFView [src]="src" (load)="onLoad()"></PDFView> |
| 38 | +``` |
32 | 39 |
|
33 | | -# Try the Demo |
| 40 | +## Demo |
34 | 41 |
|
35 | | -To try the demo, `cd` into the `demo` folder, and run the following commands: |
36 | | - |
37 | | -```sh |
38 | | -npm install |
39 | | - |
40 | | -# iOS |
41 | | -tns platform add ios |
42 | | -tns run ios |
43 | | - |
44 | | -# Android |
45 | | -tns platform add android |
46 | | -tns run android |
47 | | -``` |
| 42 | +Check out the [demo](./demo) folder for a demo application using this plugin. You can run the demo by executing `npm run demo.ios` and `npm run demo.android` from the root directory of the project. |
0 commit comments