pdfjs-dist non-agnostic language viewer
npm install pdfjs-dist-viewer-angularThis 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.
Install the viewer:
```
npm install --save pdfjs-dist-viewer-angular$3
In angular.json
`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)
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`
* [[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)"
- @ttkaae