web项目中pdf.js的使用之构建build-generic

PDF.JS是在HTML5平台上显示pdf文档Mozilla开源的一项技术使用前需要做以下的构建

1、从网址上下载源码地址：https://github.com/mozilla/pdf.js下载到的文件

我直接解压到了桌面并重命名为pdf.js后续还会用到这个路径和名称

2、安装node.js

     https://nodejs.org/en/download/

3、安装gulp打开node.js的运行后台输入如下命令

npm install -g gulp-cli

4、安装pdf.js的依赖库运行如下命令

　 cd C:\Users\Administrator\Desktop\pdf.js(pdf.js的存放路径下载后的名字是pdf.js-master我改成了pdf.js)

　 npm install

　执行完后有警告提醒

可以忽略 因为我是在window系统下运行的。

5、启动本地web服务，因为有的浏览器不允许用file://协议打开pdf文件

   gulp server

出现上述命令表示启动成功了直接在谷歌浏览器上敲上述网址得到如下界面

 

6、构建PDF.js

 重新打开一个页面输入命令

cd C:\Users\Administrator\Desktop\pdf.js

gulp generi

 

执行后你可以再文件夹中找到pdf.js\build文件夹里面生成了generic文件

 

接下去就可以开始使用了。

 这里提供下我构建的版本 点击下载

访问这个地址就能看到效果咯  http://localhost:8888/build/generic/web/viewer.html 如下图所示

接下去就放进去自己的项目进行使用吧

 下面分享下我的调用方法

1.创建iframe引入viewer.html,再主页面调用子页面的方法

document.getElementById("id").contentWindow.openpdf(pdf路径作为参数)；

2.viewer.html中添加方法

function openpdf(pdfurl){
PDFViewerApplication.close();
PDFViewerApplication.open(pdfurl, 0);
}

3..将viewer.js中的

var DEFAULT_URL = ''; //　这个值置空