【问题标题】:ng2-pdf-viewer problems with render large PDF (over 300pages)ng2-pdf-viewer 渲染大 PDF(超过 300 页)的问题
【发布时间】:2019-01-30 22:12:33
【问题描述】:

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

可以强制渲染当前页面吗?

HTML:

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

请指教!

【问题讨论】:

  • [show-all] 设置为假。您必须建立一些分页才能看到其他页面。
  • 如果设置[show-all]="false",则无法滚动页面。
  • 因此我的评论中的第二句话:您必须在其中建立一些分页才能看到其他页面。

标签: angular ionic-framework pdf-viewer


【解决方案1】:

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

【讨论】:

  • 在右边的按钮中添加这个或条件 page==totalPages 所以当页面超过 1 并且我们在最后一页时,右边的按钮将被禁用
猜你喜欢
  • 2021-01-04
  • 2018-03-06
  • 1970-01-01
  • 2022-11-28
  • 1970-01-01
  • 2018-08-21
  • 1970-01-01
  • 2014-02-03
  • 2022-07-26
相关资源
最近更新 更多