pdfjs-dist-viewer-angular v1.0.3
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.
Setting Up
Install the viewer:
npm install --save pdfjs-dist-viewer-angularExample use
In angular.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)
Use web component
In the module where you import the component using the pdfjs-viewer element, you should define the schema.
...
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
@NgModule({
declarations: [..],
imports: [..],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})In the Angular HTML template
<pdfjs-viewer [base64]="base64"></pdfjs-viewer>As native HTML
<html lang="en">
<head>
<script src="pdfjs-viewer.js"></script>
</head>
<body>
<pdfjs-viewer url="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"></pdfjs-viewer>
</body>
</html>Options
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 ✓:
base64 = "JVBERi0xLjQKJeLjz9MKMyAwIG9iagpbL0NhbFJH.. Do NOT use a base64 data URI string ✗:
base64 = "data:application/pdf;base64<JVBERi0xLjQKJeLjz> 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.
(rendered)="rendered($event)"(pdfError)
| Property | Type | Required |
|---|---|---|
| (error) | callback | Optional |
Error handling callback
(error)="onError($event)"