Web PDF viewer as a web element

This viewer is a simple pdf viewer based on pdfjs-dist@3.7.107 by Mozilla.
This viewer is a non-agnostic web component, which means you can use it in any web application once the script (pdfjs-viewer.js) is imported.
It is a refactored version of this example https://mozilla.github.io/pdf.js/examples with annotations, which makes links clickable.

$3

Install the viewer:

``
npm install --save pdfjs-dist-viewer-angular
`


$3

`json
"scripts": [
"node_modules/pdfjs-dist-viewer-angular/pdfjs-viewer.js"
],
...
`

The pdfjs-viewer.js file has a size of 477kB.

... or lazy loaded (https://angular-extensions.github.io/elements/#/home)

$3

In the module where you import the component using the pdfjs-viewer element, you should define the schema.

`ts
...
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';

@NgModule({
declarations: [..],
imports: [..],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
`

In the Angular HTML template
`ts

`

As native HTML
`ts








`

Options

* [[url]](#url)
* [[page]](#page)
* (rendered)
* (pdfError)

#### [url]

| Property | Type |
| --- | ---- |
| [url] | string | URL | TypedArray | ArrayBuffer | DocumentInitParameters |
| [url] | {data: atob(JVBERi0xLjQKJeLjz9MK...)} |

Pass pdf location

`
[url]="'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf'"
`
Or as a BLOB:

`
[url]="'blob:http://localhost:4200/eb7533b8-d1bf-4bd7-bb6c-e351df579d51'"
`
base64, just the Base64 value ✓:
`ts
base64 = "JVBERi0xLjQKJeLjz9MKMyAwIG9iagpbL0NhbFJH..
`

Do NOT use a base64 data URI string ✗:
`ts
base64 = "data:application/pdf;base64
`

#### [page]


| Property | Type | Required |
| --- | ---- | --- |
| [page] | number | Optional |

Page number

`
[page]="1"
`
If not defined, the viewer shows all pages by default

#### (rendered)

| Property | Type | Required |
| --- | ---- | --- |
| (rendered) | callback | Optional |

Get event when a page is rendered.

`angular2html
(rendered)="rendered($event)"
`

#### (pdfError)

| Property | Type | Required |
| --- | ---- | --- |
| (error) | callback | Optional |

Error handling callback

`html
(error)="onError($event)"
``

Authors

- @ttkaae