PDF.js使用笔记

pdf.js可以实现在html下直接浏览pdf文档,是一款开源的pdf文档读取解析插件。

最近拿到的任务是实现在网站前端对pdf文件的预览和下载,准备使用PDF.js实现,边学习边写下记录。

环境

jeesite开发平台、Eclipse

下载

pdf.js主要包含两个库文件,一个pdf.js和一个pdf.worker.js,一个负责API解析,一个负责核心解析。

这里提供github的下载地址,点击下载

文档结构

下载下来的包解压之后,我们需要看一下它的结构。

build和web这两个文档是关键。
这里写图片描述

web/viewer.js中看来,应该是可以打开compressd这个pdf的。

这里写图片描述

但是打开web/viewer.html,发现并不能成功打开。

这里写图片描述

查了一下,发现PDF.js默认情况下不可以打开本地PDF文件(发布后可以打开服务器文件),也不可以跨域浏览PDF。

发布

把整个文档放进webapp目录下,然后通过浏览器访问http://localhost:8080/InformationService/pdfjs/web/viewer.html
终于可以看到成功打开了pdf啦。

(InformationService是我工程的名字,根据个人情况改动)

这里写图片描述

这时我突然发现就算没有用pdf.js插件,也能在线浏览pdf,试了三个浏览器(谷歌、ie10、edge)都可以。经过大佬的提示,注意到使用了pdf.js插件时浏览pdf的界面是不一样的。

对比谷歌浏览器自带的pdf插件,可以看到pdf.js上面的菜单栏按钮更多。

这里写图片描述

大佬说,pdf.js是得有的,因为浏览器版本内核包括用户对浏览器自己的一些设置可能会影响到预览。

下一步继续。

把pdf.js写进jsp

主要在viewer的基础上进行改动。

参考网上的办法,使用传递file形参来动态指定打开的pdf文件。

首先打开viewer.js,搜索file,找到下面这句。(Ctrl+F)

这里写图片描述

这句话的意思是接收一个file形参,如果没有的时候使用默认值appConfig.defaultUrl。

这个值是什么呢?

可以看到本方法内定义了appConfig的值,是PDFViewerApplication.appConfig。

下一步我们搜索PDFViewerApplication方法看看。

这里写图片描述

在PDFViewerApplication内找到appConfig。

结果太多了,于是我改为搜索defaultUrl。

这里写图片描述

这下很快就找到了。

下一步肯定要搜索DEFAULT_URL啦。

这里写图片描述

终于找到了我们想看到的。这就解释了为什么打开viewer.html的时候显示的pdf文件啦。

如果我们想要在自己的网页中插入可浏览的pdf文件,就只要在html中加入一个链接,指向viewer.html就可以了。归根结底来说,我们是利用viewer.html来进行修改。

那么怎么做才能打开我们任意想打开的pdf文件呢?

先进行一个小测试。把原本的default_url清空。

这里写图片描述

再通过file参数打开。

http://localhost:8080/InformationService/static/pdfjs/web/viewer.html?file=compressed.tracemonkey-pldi-09.pdf

这里写图片描述

可以看到,view.html 可以通过页面参数传值的方式加载pdf文件。

这样写当然也是可行的。

这里写图片描述

那么我们可以这样做来控制file参数的值。

这里写图片描述

具体pdf的参数值,还要看上传pdf的后台是怎么写的了。

本文参考:
http://www.cnblogs.com/xiangliuyunyang/p/5956453.html
http://blog.csdn.net/xiao190128/article/details/54927730
http://blog.csdn.net/wang704987562/article/details/53895830
http://blog.csdn.net/xiangcns/article/details/42089189

  • 9
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 9
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值