在 Angular 5 中使用 ng2-pdf-viewer 导航和滚动 PDF 文件答案

【问题标题】：Navigation and Scrolling PDF file using ng2-pdf-viewer in Angular 5在 Angular 5 中使用 ng2-pdf-viewer 导航和滚动 PDF 文件
【发布时间】：2020-06-09 00:42:07
【问题描述】：

我正在尝试在我的 Web 应用程序中使用 ng2-pdf-viewer (https://www.npmjs.com/package/ng2-pdf-viewer#page-rendered) 显示滚动 PDF 文件和导航 PDF 文件页面。但它不起作用。 [show-all]="false" 时导航工作正常。

[show-all]="true" [page]="pageNo" [stick-to-page]="true"

<pdf-viewer id="pdfViewerFrame" [src]="statusReportUrl" 
                          [page]="pageNo" [zoom]="zoomValue" (after-load-complete)="callBackFn($event)"
                          [original-size]="true" [autoresize]="false" [fit-to-page]="false" [show-all]="true" [stick-to page]="true"
                        ></pdf-viewer>

【问题讨论】：

标签： angular

【解决方案1】：

如果您尝试使用“内部链接”并且您有一页一页，则需要使用“页面更改”更新当前页面：

<pdf-viewer
(pagechanging)="pagechanging($event)"
[show-all]="false"
[(page)]="page"
 style="display: block; width: 100%;"
>
</pdf-viewer>

在打字稿方面：

pagechanging(e: CustomEvent){
    this.page = e.pageNumber; // the page variable
  }

【讨论】：

【解决方案2】：

问题已解决。您可以使用“ng2-pdfjs-viewer”（https://www.npmjs.com/package/ng2-pdfjs-viewer）代替 ng2-pdf-viewer。

【讨论】：

这不是您所提问题的答案

【解决方案3】：

尝试添加 pdf-viewer 标签样式显示：阻止它为我解决问题

【讨论】：

【解决方案4】：

您不能将[show-all]="true" 与[page]="page" 一起使用。 show-all 用于多个可滚动页面。设置[show-all]="false" 指定要显示的单个页面。

[stick-to page]="true"这里应该是[stick-to-page]="true"，并且它也应该只与[show-all]="true"结合使用

【讨论】：