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)"

Authors

@ttkaae

Keywords

FAQs

What is pdfjs-dist-viewer-angular?

Is pdfjs-dist-viewer-angular popular?

Is pdfjs-dist-viewer-angular well maintained?

Last updated on 21 Jun 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install