CODEWITHSUNDEEP
angularionic-frameworkpdf-viewer
David Pantea
David Pantea

Reputation: 101

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!

Upvotes: 6

Views: 8754

Answers (1)

Kevin Dias
Kevin Dias

Reputation: 1076

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;
  }

Upvotes: 8

Related Questions