ngx-pdf-viewer-demo v2023.10.1-testworkFlow09

@kno2/ngx-pdf-viewer

Angular PDF viewer built with PDF.js.

Example Usage

Module

import { PdfViewerModule } from '@kno2/ngx-pdf-viewer';

@NgModule({
    ...
    imports: [
        BrowserModule,
        PdfViewerModule
    ],
    ...
})
export class AppModule { }

Template

<pdf-viewer src="path/to/pdf.pdf"></pdf-viewer>

API

Inputs

• src: string | Uint8Array | PDFSource, default: undefined

  The source of the PDF. PDFSource has the following properties:

  • url: string
  • data?: Uint8Array
  • httpHeaders?: [key: string]: string
  • password?: string

• cache: boolean, default: false

  Configures whether or not to cache documents.

• zoom: number | 'page-width' | 'page-height' | 'page-fit' | 'auto', default: undefined

  Configures the default zoom. If a number is provided, should be a percentage (i.e. 10% or 200%).

• paging?: 'enabled' | 'disabled' | 'hidden', default 'enabled'

  Configures whether to disable or hide the Paging toolbar controls.

• rotate?: 'enabled' | 'disabled' | 'hidden', default 'enabled'

  Configures whether to disable or hide the Rotate toolbar controls.

• remove?: 'enabled' | 'disabled' | 'hidden', default 'enabled'

  Configures whether to disable or hide the Remove toolbar controls.

• print?: 'enabled' | 'disabled' | 'hidden', default 'enabled'

  Configures whether to disable or hide the Print toolbar controls.

• download?: 'enabled' | 'disabled' | 'hidden', default 'enabled'

  Configures whether to disable or hide the Download toolbar controls.

Outputs

• pageRemove: EventEmitter<PageEvent>

  Emits when the Remove Page button is clicked. PageEvent has the following property:

  • pageNumber: number - The page number of the page that will be removed.

• pageRotate: EventEmitter<PageRotationEvent>

  Emits when either the Rotate Clockwise of Rotate Counter-clockwise buttons are clicked. PageRotationEvent has the following propertie:

  • pageNumber: number - The page number of the page that will be rotated.
  • rotation: number - The number of degrees the page that will be rotated.

Instance Methods

• open(src: string | Uint8Array | PDFSource): void

  Opens a PDf document using the provided src. load will emit when the document has loaded.

• remove(event: { pageNumber: number }, emit = true): void

  Removes the page matching the provided pageNumber from the viewer. If emit is not set to false, causes pageRemove to emit.

• rotate(event: { pageNumber: number, rotation: number }, emit = true): void

  Rotates the page matching the provided pageNumber by the given rotation. rotation values should be in increments of 90. If emit is not set to false, causes pageRotate to emit.

• rotateAll(rotation: number, emit = true): void

  Rotates the all pages by the given rotation. rotation values should be in increments of 90. If emit is not set to false, causes pageRotate to emit for each page.

• reload(emit = true): void

  Reloads the current PDF document. If emit is not set to false, causes documentReload to emit.

• print(emit = true): void

  Triggers printing of the current PDF document. If emit is not set to false, causes documentPrint to emit.

• download(emit = true): void

  Triggers download of the current PDF document. If emit is not set to false, causes documentDownload to emit.

• clearCache(): void

  Clears the document cache if it has been enabled.

Building

Run the following command to build the ngx-pdf-viewer library.

npm run build:lib

The compiled build assets can be found in dist/ngx-pdf-viewer.

Development server (demo)

Run the following command to start the dev server.

npm start

Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Running unit tests

Run the following command to execute the unit tests via Karma.

npm test

Running end-to-end tests

Run the following command to execute the end-to-end tests via Protractor.

npm run e2e

Demo

To build the demo, run the following command:

npm run docs

This will compile the project and update the assets in the docs folder. This will need to be commited. GitHub will then deploy the demo automatically.