使用Angular 5中的NG2-PDF观看器导航和滚动PDF文件

Question

我正在尝试使用ng2-pdf-viewer(https://www.npmjs.com/package/ng2-pdf-viewer#使用NG2-PDF-Viewer(https://www.npmjs.com/pdf-viewer#(页面渲染(在我的Web应用程序中。但这是行不通的。当[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>

Answer 1

如果您要使用"内部链接"，并且有一个页面，则需要更新当前页面，使用" PageChanging"：

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

Answer 2

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

Answer 3

尝试为PDF-Viewer标签样式添加：block IT解决我的问题

Answer 4

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

[stick-to page]="true"这应该是 [stick-to-page]="true"，也应该仅与 [show-all]="true"