CODEWITHSUNDEEP
angular
Nikita Gupta
Nikita Gupta

Reputation: 37

Navigation and Scrolling PDF file using ng2-pdf-viewer in Angular 5

I am trying to show scroll the PDF file and Navigate PDF file pages using ng2-pdf-viewer (https://www.npmjs.com/package/ng2-pdf-viewer#page-rendered) in my web application. But it is not working. Navigation is working fine when [show-all]="false".

[show-all]="true" [page]="pageNo" [stick-to-page]="true"

<pdf-viewer id="pdfViewerFrame" [src]="statusReportUrl" 
                          [page]="pageNo" [zoom]="zoomValue" (after-load-complete)="callBackFn($event)"
                          [original-size]="true" [autoresize]="false" [fit-to-page]="false" [show-all]="true" [stick-to page]="true"
                        ></pdf-viewer>

Upvotes: 1

Views: 13868

Answers (4)

Phil
Phil

Reputation: 7566

You cannot use [show-all]="true" together with [page]="page". show-all is for multiple, scrollable pages. Set [show-all]="false" to specify a single page you want to display.

[stick-to page]="true" this here should be [stick-to-page]="true" and it also is supposed to be used only in a combination with [show-all]="true"

Upvotes: 0

Luis Ya&#241;ez
Luis Ya&#241;ez

Reputation: 51

If you're trying to use "internal link" and you have one by one page, you need to update the current page, using "pagechanging" : 

<pdf-viewer
(pagechanging)="pagechanging($event)"
[show-all]="false"
[(page)]="page"
 style="display: block; width: 100%;"
>
</pdf-viewer>

and in the typescript side:

pagechanging(e: CustomEvent){
    this.page = e.pageNumber; // the page variable
  }

Upvotes: 2

Andryxa Piddubnjak
Andryxa Piddubnjak

Reputation: 111

try to add for pdf-viewer tag style display: block it solve issue for me

Upvotes: 0

Nikita Gupta
Nikita Gupta

Reputation: 37

The issue has been resolved. You can use "ng2-pdfjs-viewer" (https://www.npmjs.com/package/ng2-pdfjs-viewer) instead of ng2-pdf-viewer.

Upvotes: 1

Related Questions