注册 登录
查看: 2399|回复: 0

使用pdf.js实现pdf文档在线浏览

[复制链接]

54

主题

56

帖子

1143

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1143
发表于 2016-12-27 10:00:54 | 显示全部楼层 |阅读模式
第一步,配置安装nodejs环境。
1、pdf.js的运行并不依赖nodejs,只是使用到了nodejs的一些工具包对pdf.js的一些文件进行编译。nodejs的环境安装和配置,请自行搜索先关系统平台的安装配置方式。

2、nodejs安装配置完毕之后,再配置一下nodejs的npm镜像,因为npm直接安装包的话,速度很慢,配置成国内淘宝的镜像,速度很快。
淘宝NPM镜像地址:http://npm.taobao.org/(有教程)

3、全局安装gulp,教程==>http://www.gulpjs.com.cn/docs/getting-started/,只是我们要把命令中的npm换成cnpm


第二步,下载编译pdf.js

https://github.com/mozilla/pdf.js直接下载并把文件解压到你想要存放的目录或者使用git下载到指定目录,打开到找到make.js文件所在的目录,在当前目录下运行编译命令:
  1. node make generic
复制代码
如果运行过程中,提示有错误,那就根据提示的错误寻找解决办法,整个过程中,出现错误,一般都是因为依赖包没安装完。
过程中我遇到的错误,提示运行“npm install”安装依赖。

上述命令执行成功之后,就会在当前目录下生成一个build文件夹,这个文件夹里面的都系就是我们想要的了。

build文件夹下的目录结构大概是这样的:

屏幕快照 2016-12-27 上午9.28.09.png

不过直接点击view.html是不能正常运行的,如果你部署了wamp等本地服务器环境那就最好了。
比如我就没有部署,我是使用了我的前端开发工具HBuilder打开build/generic/web目录下的view.html,然后点击右上角的chrome图标在谷歌浏览器打开的。
屏幕快照 2016-12-27 上午9.36.19.png

我打开的链接:http://127.0.0.1:8020/pdf.js-master/build/generic/web/viewer.html
浏览效果:
屏幕快照 2016-12-27 上午9.40.12.png

默认的浏览文件是compressed.tracemonkey-pldi-09.pdf,如果正式部署的时候,你可以把这个文件换成你站点或者相关的内容介绍的pdf文件,如intro.pdf,在viewer.js中把var DEFAULT_URL = 'compressed.tracemonkey-pldi-09.pdf'中的这个文件换成intro.pdf。


如果要浏览其他pdf文件怎么办?直接在viewer.html后面加上一个file=xxx.pdf的文件即可。如我在当前viewer.html的同级目录下放了一个go.pdf文件,浏览链接是这样的:http://127.0.0.1:8020/pdf.js-mas ... ic/web/viewer.html?file=./go.pdf

浏览效果:
屏幕快照 2016-12-27 上午9.54.13.png



(以上教程,参考了CSDN的一篇博文并结合自己的理解撰写,非常感谢:http://blog.csdn.net/hyhbyl/article/details/20994945


那么问题就来了,我们是不是可以把office文档都转化成pdf文档,然后实现在线浏览呢?当然可以,我们可以把安装libreoffice或者openoffice,然后通过soffice转换命令把office转成pdf文档。



Office转pdf请参考:http://www.hc-cms.com/forum.php?mod=viewthread&tid=12





回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回列表 返回顶部