发现的一个pdf 处理的js项目,不错学习下

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存储了当前页数(未看完的),滚动条(当前页底部)距离屏幕顶端的距离,及左侧距离

数据如图所示:

偏移距离的计算:

需要进行计算

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。