Peter554 / ngx-pdfjs

A simple component for viewing PDFs in an Angular application using PDF.js

ngx-pdfjs

A simple component for viewing PDFs in an Angular application using PDF.js.

Usage

• npm install pdfjs-dist

• Add scripts to angular.json.

"scripts": [
    "node_modules/pdfjs-dist/build/pdf.min.js",
    "node_modules/pdfjs-dist/build/pdf.worker.min.js",
    ...
]

• Copy all files from the PdfViewerModule into your project and import into your root AppModule.

import { PdfViewerModule } from './pdf-viewer/pdf-viewer.module';
...
imports: [..., PdfViewerModule],

• Use the component.

e.g.

<!-- 'pdf' is some Blob we want to view -->
<div class="viewer-container">
  <app-pdf-viewer [src]="pdf" [quality]="2" width="90%" maxWidth="800px" spacerSize="0.5rem"></app-pdf-viewer>
</div>

.viewer-container {
  display: flex;
  justify-content: center;
  background-color: #eee;
}

See a demo here.

@Inputs

@Input	Type	Required	Default	Description
src	string or Blob	Yes	''	The PDF source.
quality	number	No	2	A quality factor. Higher values will look better but render slower.
width	string	No	'100%'	The PDF width.
maxWidth	string	No	'800px'	The PDF max-width.
spacerSize	string	No	'0'	The amount of space between each page.