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-angular
Example 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] | {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)"