ngx-extended-pdf-viewer Is it possible to render only one page?

Question

I am using ngx-extended-pdf-viewer in Angular 8, the pdf shows up correctly. My problem is that i only need to show a single page but by default it shows all the pages.

Is there a way to render only one page with this pdf viewer ?

here is my code

<ngx-extended-pdf-viewer 

      [src]="pdfSrc" 
      [handTool]="true"
      [showHandToolButton]="true"
      backgroundColor="#ffffff"
      [height]="'100vh'"
      [useBrowserLocale]="true"
      [zoom]= 73
      [showSidebarButton]="false"
      [showFindButton]="false"
      [showPagingButtons]="false"
      [showZoomButtons]="false"
      [showPresentationModeButton]="false"
      [showOpenFileButton]="false"
      [showPrintButton]="false"
      [showDownloadButton]="false"
      [showBookmarkButton]="false"
      [showSecondaryToolbarButton]="false"
      [showRotateButton]="false"
      [showHandToolButton]="false"
      [showScrollingButton]="false"
      [showSpreadButton]="false"
      [showPropertiesButton]="false"
      [sidebarVisible]="false"

></ngx-extended-pdf-viewer

score 1 · Answer 1 · answered Oct 03 '19 at 09:12

1

Have you read the documentation ?

[(page)] → two-way binding attribute to determine the page to display; more precisely: [page]="25" makes the PDF viewer show page 25 (at any time - even after load time); [(page)]="attribute" updates the attribute each time the user scrolls to another page. If you're only interested in the event, that's (pageChange).

answered Oct 03 '19 at 09:12

[page]="number" only center the pdf viewer to the page, what i want is that the pdf rendered, is the page that i have selected, something similar to ng2-pdf-viewer. – Vind Oct 03 '19 at 09:29

score 1 · Accepted Answer · answered Oct 16 '19 at 20:31

I'm the developer of ngx-extended-pdf-viewer. No, currently it's not possible to render a single page only. I've created the component to bring the complete feature set of the good old Adobe reader to the Angular world. It's about reading entire documents in style.

To display individual page, I recomment two other approaches:

Use the PDF widget of Vadym Yatsyuk. This guy has created an impressive widget, so it may be your friend. However, it's still optimized for displaying entire documents.
The pdf.js project page has examples how to render individual pages. That's a low-level API, but as far as I can see, the documentation is good.

Also see the other answers below. They mention the single-page mode. That's probably not exactly what you need, but it's close. — Stephan Rauh, Sep 10 '21 at 19:42

score 1 · Answer 3 · answered Jul 12 '21 at 09:15

With the current version it's possible with pageViewMode set to "single":

<ngx-extended-pdf-viewer
  [src]="'assets/pdfs/sample.pdf'"
  [pageViewMode]="'single'"
></ngx-extended-pdf-viewer>

It's documented here:

https://www.pdfviewer.net/extended-pdf-viewer/page-view-mode

score 0 · Answer 4 · edited Oct 25 '20 at 22:25

If anyone still wants a better answer to the above scenario, now this is possible through the recent development.

I opened the following thread, with the developer and was able to get this feature added in the latest version (4.1.0 - 5.0.0).

https://github.com/stephanrauh/ngx-extended-pdf-viewer/issues/495

Please check the API here, https://pdfviewer.net/getting-started and the DEMO of single page mode here https://pdfviewer.net/page-view-mode

ngx-extended-pdf-viewer Is it possible to render only one page?

4 Answers4