Ng2-pdf-viewer: [show-all] is showing first two page only.

Created on 8 Feb 2017  路  8Comments  路  Source: VadimDez/ng2-pdf-viewer

show-all is showing first two page only.

[page]="page"
[original-size]="false"
[render-text]="false"
[show-all]="true"
style="display: block;">

pdfSrc: string = "../assets/pdf/Cuelinks_SDK-Integration_Guide.pdf"
page: number = 5;

I dont know what value give in page.

bug

Most helpful comment

pdf-viewer.component.js

`PdfViewerComponent.prototype.renderMultiplePages = function () {
var _this = this;
var container = this.element.nativeElement.querySelector('div');
var page = 1;
this.removeAllChildNodes(container);

    for(let i = 1; i < _this._pdf.numPages+1 ; i++){
        this.renderPage(i)
    }

   /* this.renderPage(page++).then(function () {
        if (page <= _this._pdf.numPages) {
            return _this.renderPage(page++);
        }
    });*/ 
};`

All 8 comments

Same issue, show-all: true is just showing the first two pages

Also same issue! Works fine with [show-all]="false" and using pagination to get to each page of the document but show-all is not displaying the last page.

This is true even on your demo https://vadimdez.github.io/ng2-pdf-viewer/

Same issue

Same issue here.

Same problem

I have the number of pages stored in my database so i use ngFor by creating an empty array based on the number of pages and index + 1 for the workaround

I have the number of pages stored in my database so i use ngFor by creating an empty array based on the number of pages and index + 1 for the workaround

afterLoad() I am using the PDFDocumentProxy and calling pdf.getPage(i) in a loop to get each PDFPageProxy and calling render on each page. No need to fetch the pdf more than once.

<pdf-viewer #pdfViewer [src]="url" [page]="1" (after-load-complete)="afterLoad($event)">
</pdf-viewer>
<ng-container *ngFor="let page of remainingPdfPages; let i = index">
    <canvas class="pdf-page" [attr.page]="i + 2"></canvas>
</ng-container>
afterLoad(pdf: PDFDocumentProxy) {
    this.totalPages = pdf.numPages;
    this.remainingPdfPages = new Array(pdf.numPages - 1);
    setTimeout(() => {
        for (let i = 2; i < pdf.numPages + 1; i++) {
            pdf.getPage(i).then((page: PDFPageProxy) => {
                let scale = 1.0;
                let viewport = page.getViewport(scale);
                let canvas: any = $(".pdf-page[page='" + i + "']")[0];
                let context = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width = viewport.width;
                let renderContext = {
                    canvasContext: context,
                    viewport: viewport
                };
                page.render(renderContext);
            });
        }
    });
}

pdf-viewer.component.js

`PdfViewerComponent.prototype.renderMultiplePages = function () {
var _this = this;
var container = this.element.nativeElement.querySelector('div');
var page = 1;
this.removeAllChildNodes(container);

    for(let i = 1; i < _this._pdf.numPages+1 ; i++){
        this.renderPage(i)
    }

   /* this.renderPage(page++).then(function () {
        if (page <= _this._pdf.numPages) {
            return _this.renderPage(page++);
        }
    });*/ 
};`
Was this page helpful?
0 / 5 - 0 ratings

Related issues

sabarinathancs picture sabarinathancs  路  4Comments

roginneil picture roginneil  路  3Comments

fncamm picture fncamm  路  4Comments

ShayShaked picture ShayShaked  路  5Comments

jgrant95 picture jgrant95  路  6Comments