Angular PDF viewer showcase. Running on Angular 18.2.12 and ngx-extended-pdf-viewer 22.0.0-alpha.10. Choose a version:

You can fine-tune the behavior of the PDF viewer by modifying the default options. The full list of the options is available here. Most options are very advanced or covered by regular attributes of <ngx-extended-pdf-viewer />, so use the options at your own risk.

This page uses the assetsFolder attribute to use the "bleeding edge" version of pdf.js instead of the regular release of pdf.js. However, to see the effect you need a full reload of the page (i.e. you need to hit the F5 key). After that, the version number of pdf.js changes. You can see that in the blue bar of this page and in the console window of the developer tools.

import { pdfDefaultOptions } from 'ngx-extended-pdf-viewer';

...
constructor() {
  pdfDefaultOptions.assetsFolder = 'bleeding-edge';
}
<ngx-extended-pdf-viewer
    [src]="'/assets/pdfs/codpaste-teachingpack.pdf'"
    [height]="'90vh'"
    [showBorders]="showBorders"
    [(scrollMode)]="scrollMode"
    zoom="30%"
>
</ngx-extended-pdf-viewer>
Copyright hint: the file has been published by Paroliver under a CC BY-SA 4.0 international license on commons.wikimedia.org.
File name:

-

File size:

-

Title:

-

Author:

-

Subject:

-

Keywords:

-

Creation Date:

-

Modification Date:

-

Creator:

-

PDF Producer:

-

PDF Version:

-

Page Count:

-

Page Size:

-

Fast Web View:

-

Choose an option Alt text (alternative text) helps when people can’t see the image or when it doesn’t load.
Aim for 1-2 sentences that describe the subject, setting, or actions.
This is used for ornamental images, like borders or watermarks.
Preparing document for printing…
0%