0

我上传了不到 2 页的 pdf 文档，pdf 查看器正在工作并快速加载所有页面，如 2 页。但上传超过 2 页（例如：51 页）pdf 查看器正在工作但仅加载前两页，其余页面显示加载图标。帮助解决这个问题。

我的 ng2-pdf-viewer 版本是 7.0.1。并且还使用了 ng2-pdf-viewer@7.0.2。

这是我的 app.module.ts 文件

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

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

这是我的 HTML 文件

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

这是我的 TS 文件

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)
 }
4

0 回答 0