1.下载地址:http://mozilla.github.io/pdf.js/
2.使用源码进行阅读
需要安装node.js,
使用linux系统,源码安装nodeJs
3.第一个hello world程序运行
在pdf.js的根目录运行 run `gulp server`
报错误如下:Error: Cannot find module 'vinyl-fs'
使用npm进行安装,命令为:npm install vinyl-fs
将缺失的模块安装完,直到不报如上错误;
出现:Server running at http://localhost:8888/ 即为成功了
4.访问http://localhost:8888/examples/helloworld/index.html
发现systemjs.js为404,需要安装sytemjs,命令如下:
npm install systemjs
再次访问发现systemjs-plugin-babel不存在,安装命令如下:
npm install systemjs-plugin-babel
再次访问发现core-js不存在,安装命令如下:
npm install core-js
viewer.js的源码阅读
ToolBar及页面最顶端的工具栏,事件在var Toolbar = function (){}内定义
具体事件是key: '_bindListeners'{}方法内,
例如:
items.download.addEventListener('click', function () {
eventBus.dispatch('download');
});
采用了事件通知的方式,具体事件处理存储在了eventBus.dispatch('download');
增加按钮的处理事件:eventBus.on('handmouse',webCurHandMouse);
其中webCurHandMouse为具体的处理函数;handmouse为消息跳转的地址
页面滚动:
滚动条为pdf.js自己生成的,并没有使用浏览器的滚动条
webViewerWheel函数是鼠标滚动的事件
PDFViewerApplication.store存储了当前页数(未看完的),滚动条(当前页底部)距离屏幕顶端的距离,及左侧距离
数据如图所示:
偏移距离的计算:
需要进行计算