Question

我正在尝试在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>

Answer 1

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

Answer 2

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

Answer 3

如果您尝试使用“内部链接”，并且一页一页，则需要使用“ 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 4

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

[stick-to page]="true"，此处应为[stick-to-page]="true"，也应仅与[show-all]="true"组合使用

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

4 个答案: