CODEWITHSUNDEEP
htmlangulartypescriptpdfng2-pdfjs-viewer
Arun Kumar
Arun Kumar

Reputation: 85

ng2-pdf-viewer is not loaded all pdf pages how to solve this?

I upload less than 2 page pdf document, the pdf viewer is working and load all page like 2 pages quickely. but upload more than 2 pages (ex: 51 pages) the pdf viewer is working but load first two pages only, remaining pages are shown loading icon. help to solve this problem.

My ng2-pdf-viewer version is 7.0.1. And also used [email protected].

This is my app.module.ts File

...
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { PdfViewerModule } from 'ng2-pdf-viewer';
...

@NgModule({
  declarations: [
  .....
  ],
  imports: [
    ...
    NgbModule,
    PdfViewerModule
    ...
  ],
  providers: [],
  bootstrap: [AppComponent]
})

This is my HTML File

<input type="file" class="fileInput" id="file_select_id" (change)="pdfDocSelect($event)" accept=".pdf, .eps">

<div class="preview_label" (click)="openPdf(PDF)" id="label_id">
    <img class="previewimg"src="assets\img\preview.svg">
    <span class="preview_text">Preview</span>
</div>

<ng-template #PDF let-modal id="PdfViewer">
    <div class="ModalMainBox">
        <div class="modal-content ModalContent">
            <div class="modal-header">
                <div class="PdfTitle">PDFName</div>
                <button type="button" class="PdfClose" aria-label="Close" (click)="modal.dismiss('Cross click')">
                    <span class="modal_close_icon" aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body PdfSize">
                <pdf-viewer class="pdfSrc" [src]="File" [rotation]="0" [fit-to-page]="true" [original-size]="true" [show-all]="true"></pdf-viewer>
            </div>
        </div>
    </div>
</ng-template>

This my TS File

import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

Fie: any;

constructor(private modalService: NgbModal){}

PdfViewerFn(e: any) {
    let Pdf: any = document.getElementById('file_select_id');
    if (typeof (FileReader) !== 'undefined') {
      let reader = new FileReader();
      reader.onload = (e) => {
        this.File = e.target?.result
      }
      reader.readAsArrayBuffer(Pdf.files[0]);
    }
  }

  // PDF View for Thesis Upload document
  openPdf(pdf: any) {
    if (this.File) {
      this.modalService.open(pdf, { ariaLabelledBy: 'PdfViewer' }).result;
    }
  }

 pdfDocSelect(event: any): void {
    console.log(event.target.files[0]);
    this.PdfViewerFn(event)
 }

Upvotes: 2

Views: 1952

Answers (0)

Related Questions