Ng2-pdf-viewer: Need to show Page Thumbnail

[Vigneshjana]

Is it possible to show page thumbnail in this library? If so please explain how to implement that.
Thanks

[Vigneshjana]

Any Update?? Is it Possible to implement Thumbnail in this Library

[masagatech]

Hi

In Angular way

In component

 <div id="preview">
            <div class="thumbnailpage" *ngFor="let item of thumbnail" id="page{{item.page}}">
                <img src="{{item.url}}" style="height: 100; width: 100px"><span class="pagenumber">{{item.page}}</span>
            </div>

        </div>

  <pdf-viewer [zoom-scale]="page-fit" [src]="pdfSrc" [original-size]="false" [render-text]="false"
                    style="display: block;" [zoom]="zoom" (on-progress)="onProgress($event)"
                    (page-rendered)="pageRendered($event)" (after-load-complete)="loadComplete($event)">
                </pdf-viewer>

in .ts file

loadComplete(pdf: PDFDocumentProxy): void {


}

Important is "e.source.canvas.toDataURL()"

thumbnail = [];
 pageRendered(e) {

 this.thumbnail.push({
                page: e.pageNumber,
                url: e.source.canvas.toDataURL()
    })
}

In JQUERY Way

In HTML

<div id="preview"></div>

  <pdf-viewer [zoom-scale]="page-fit" [src]="pdfSrc" [original-size]="false" [render-text]="false"
                    style="display: block;" [zoom]="zoom" (on-progress)="onProgress($event)"
                    (page-rendered)="pageRendered($event)" (after-load-complete)="loadComplete($event)">
                </pdf-viewer>

Code Side

loadComplete(pdf: PDFDocumentProxy): void {
 $('#preview').empty()

}

Important is "e.source.canvas.toDataURL()"

 pageRendered(e) {

 $('#preview').append('<div class="thumbnailpage" id="page' + e.pageNumber + '"><img src="' + e.source.canvas.toDataURL() + '" style="height: 100; width: 100px"><span class="pagenumber">' + e.pageNumber + '</span></div>');
}

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.