How to scroll to page?

[akarabach]

version: ^1.0.2

<pdf-viewer [src]="assets/test.pdf"
            [page]="'3'"
            [original-size]="true"
            [show-all]="true"
            style="display: block;">
</pdf-viewer>

This code doesn't work. How i can scroll to 3 page in pdf file ?

[VadimDez]

The functionality will be available in 2.0.0.
For now you can use [(page)]="page" with [show-all]="true". Or you can always implement your own scrollTo with js.

[akarabach]

For now you can use [(page)]="page" with [show-all]="true".

doesn't work

[VadimDez]

You can use [stick-to-page]="true" available since 2.0.0. Closing.

[VadimDez]

Now you can scroll to a page with the following code, add this to your component that uses pdf-viewer component

// define view child
@ViewChild(PdfViewerComponent) private pdfComponent: PdfViewerComponent;

// ...

scrollToPage(page: number) {
  this.pdfComponent.pdfViewer.scrollPageIntoView({
    pageNumber: page
  });
}

and then use it

scrollToPage(3);

[metanav]

How can I import PdfViewerComponent, which package?

[VadimDez]

@metanav can you try?

import { PdfViewerComponent } from 'ng2-pdf-viewer/dist/pdf-viewer.component.js';

[abbasshujah]

It is not working for me if anyone has made it work can you post an example

[akarabach]

@abbasshujah Memory leaks in this lib, don't use it for large files. See https://github.com/VadimDez/ng2-pdf-viewer/issues/220

Try to use pdfjs-dist and typings for it @types/pdf. I don't remember why we didn't use this library, but pdfjs works perfect.

[abbasshujah]

I want to be able to programmatically highlight things in PDF which I cant find in PDF.js, Do you know how to do that in PDF.js

…

On Wed, Jun 20, 2018 at 11:06 AM, Andrei K ***@***.***> wrote: @abbasshujah <https://github.com/abbasshujah> Memory leaks in this lib, don't use it for large files. See https://github.com/VadimDez/ ng2-pdf-viewer/issues/220 <http://issue-220> Try to use pdfjs-dist and typings for it @types/pdf. I don't remember why we didn't use this library, but pdfjs works perfect. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#63 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/Ad2TYJ-1ROXQggi5oJNVEWLXhrHIpnmfks5t-mTggaJpZM4MSONs> .

[CC2013]

Now you can scroll to a page with the following code, add this to your component that uses pdf-viewer component

// define view child
@ViewChild(PdfViewerComponent) private pdfComponent: PdfViewerComponent;

// ...

scrollToPage(page: number) {
  this.pdfComponent.pdfViewer.scrollPageIntoView({
    pageNumber: page
  });
}

and then use it

scrollToPage(3);

I tried this in my project, but it didn't work. Any other ideas that I can show all pages and also can use pagination to guide which page I want?

[ParagBadala]

Scroll is not working for me when i used it in my project please help me in this

[pumbhadianilesh]

VadimDez

I need to scroll to particular position within a single page programmatically (scroll to left or right and top or Bottom).
Please help me in that regard.

Thanks in Advance

[cascesme]

I solved this issue by creating my own implementation to scroll to view.

private scrollToPage(page: number): void {
        const scroller = $(`div.page[data-page-number|=${page}]`)[0];
        if (scroller !== undefined && page > 1) {
            scroller.scrollIntoView({ behavior: 'smooth', block: 'center' });
        }
}

This should be executed (after-load-complete)="setTimeout(()=>scrollToPage(page), 50)"

Even if this is marked as solved by the library I can't get it to work the normal way.