angular2.x 集成PDF.js

angular2.x 集成PDF.js

访问源码及地址

github的地址 https://github.com/mozilla/pdf.js
参考文章地址 https://blog.csdn.net/Java_Mike/article/details/77743132?locationNum=7&fps=1

需要引入的文件包 generic文件 ，请去下边的百度网盘下载即可。

https://pan.baidu.com/s/1I495Lv7pQ9rIXkYt7MkJOQ

以下是我的项目目录结构

注意把整个generic文件都引入，此处我是引入到了 assets文件内，因为打开pdf路径时我需要编译后的文件。

引入及应用

需要引入的html

     <a  style="cursor:pointer;"  target="_blank" (click)="showPdf()">查看详情</a>

ts中方法

 public showPdf() {
    window.open(this.httpService.HOST+'/assets/generic/web/viewer.html?file=（此处替换成pdf文件名字就行）.pdf#page=1')
  };

注意此处打开的file 必须是你angular-cli 项目 编译后的文件所在目录。

打包参数

本地项目 运行 npm run build 之后的目录

需要打开的本地pdf文件需放置在assets/ generic/web 下边

如图：

默认打开pdf第一页

只需要在 设置打开的pdf文件名字后边 添加 #page=1 即可。