angularionic-frameworkpdf-viewer

ng2-pdf-viewer problems with render large PDF (over 300pages)

I have a problem with loading large PDF with ng2-pdf-viewer library, because if I scroll down I have to wait until all the pages are rendered.

It's possible to force to render the current page?

HTML:

<pdf-viewer [src]="pdfSrc" [render-text]="false" [original-size]="true" [fit-to-page]="true" style="display: block;"></pdf-viewer>

Please advice!

Solution

  • u need to paginate the pdf

    html

    <pdf-viewer 
 [src]="pdf" 
 [show-all]="false"  
 [page]="page" 
 (after-load-complete)="afterLoadComplete($event)" 
 [original-size]="false" [render-text]="true" >
</pdf-viewer>

 <button (click)="previousPage()" [disabled]="page === 1"></button>
   
 <button 
 (click)="nextPage()" 
 [disabled]="totalPages === 1 || page === totalPages">
 </button>

 <p>{{ page }} / {{ totalPages }}</p>

    ts

      totalPages: number;
  page: number = 1;
  isLoaded: boolean = false;
  
  nextPage() {
    this.page += 1;
  }
    
   previousPage() {
    this.page -= 1;
  }
    
  afterLoadComplete(pdfData: any) {
    this.totalPages = pdfData.numPages;
    this.isLoaded = true;
  }