angular - ng2-pdf-viewer 渲染大 PDF 的问题(超过 300 页)

标签 angular ionic-framework pdf-viewer

我在使用 ng2-pdf-viewer 库加载大型 PDF 时遇到问题,因为如果我向下滚动,我必须等到所有页面都呈现出来。

可以强制呈现当前页面吗?

HTML:

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

请指教!

最佳答案

你需要对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;
      }

关于angular - ng2-pdf-viewer 渲染大 PDF 的问题(超过 300 页),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54450358/

相关文章:

angular - 检查对象是否存在于 Angular 6 的数组中

angularjs - 最新 XCode 更新后 Ionic Apps 中出现无限摘要循环(仅限 iOS)

javascript - 使用 100% 高度 div 填充 ion-content

javascript - 功能策略已在本文档中禁用地理定位

javascript - Pdf.js : How to load file + view -- An error occurred while loading the PDF. 更多信息关闭(搜索 "normal"示例)

html - 使用默认 PDF 查看器从 Chrome IFRAME 打开 PDF 失败

javascript - 如何在 Typescript 和 Angular 2 中使用 "@input set"检索数据?

javascript - ngModel 无法正确检测数组更改

rest - Angular 2 创建模型与动态处理 json 对象?

ngx-extended-pdf-viewer 中的 Angular 6+ 绑定(bind) [src]