Gathering detailed insights and metrics for pdfjs-dist-viewer-angular
Gathering detailed insights and metrics for pdfjs-dist-viewer-angular
Installations
npm install pdfjs-dist-viewer-angularDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
20.3.1
NPM Version
9.6.7
Score
40.2
Supply Chain
86.4
Quality
75.6
Maintenance
50
Vulnerability
99.3
License
Releases
Unable to fetch releases
Download Statistics
Total Downloads
3,982
Last Day
6
Last Week
15
Last Month
109
Last Year
1,046
Bundle Size
460.59 kB
Minified
129.83 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
1.0.3
Package Id
pdfjs-dist-viewer-angular@1.0.3
Unpacked Size
469.28 kB
Size
137.37 kB
File Count
4
NPM Version
9.6.7
Node Version
20.3.1
Published on
Jun 21, 2023
Total Downloads
Cumulative downloads
Total Downloads
3,982
Last Day
0%
6
Compared to previous day
Last Week
-28.6%
15
Compared to previous week
Last Month
-19.9%
109
Compared to previous month
Last Year
-24.7%
1,046
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Peer Dependencies
1
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
1 "scripts": [ 2 "node_modules/pdfjs-dist-viewer-angular/pdfjs-viewer.js" 3 ], 4 ...
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.
1... 2import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; 3 4@NgModule({ 5 declarations: [..], 6 imports: [..], 7 schemas: [CUSTOM_ELEMENTS_SCHEMA], 8})
In the Angular HTML template
1 <pdfjs-viewer [base64]="base64"></pdfjs-viewer>
As native HTML
1<html lang="en"> 2<head> 3 <script src="pdfjs-viewer.js"></script> 4</head> 5<body> 6 <pdfjs-viewer url="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"></pdfjs-viewer> 7</body> 8</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 ✓:
1 base64 = "JVBERi0xLjQKJeLjz9MKMyAwIG9iagpbL0NhbFJH..
Do NOT use a base64 data URI string ✗:
1 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.
1(rendered)="rendered($event)"
(pdfError)
| Property | Type | Required |
|---|---|---|
| (error) | callback | Optional |
Error handling callback
1(error)="onError($event)"
Authors
No vulnerabilities found.
No security vulnerabilities found.