网页中使用pdf.js展示pdf文件,全屏问题以及绝对路径如何读取
来源:互联网 发布:淘宝客在如何转换链接 编辑:程序博客网 时间:2024/05/18 02:18
PDF展示
Web项目 其中有个需求是在网页中内嵌一个pdf展示,通过一侧展示出来的文件树的点击事件,展示不同的pdf文件,同时还要支持pdf的放大缩小旋转全屏等功能。
起初想了几种方案:
1. 将pdf文件转换成tiff文件(icepdf),公司有可以展示tiff的插件,能满足各种需求,但是在pdf转tiff过程中在服务器上出现字重的情况,一直没找出原因,最终放弃。
2. 上网需要各种插件。
最早先用的是pdfObject.js根据官网上的例子写了个demo 发现似乎不能旋转。本以为能解决这个需求了,空欢喜一场(不过在写这篇文章的时候,突然发现别写的例子好像可以旋转,不过我已经解决了 hhh 下次好好研究一下)
继续找,发现了pdf.js这么个神器,欣喜若狂啊,现在开始讲pdf.js在项目中的运用。
Pdf.js的官网地址
http://mozilla.github.io/pdf.js/
对js的技术不是特别熟悉 看到这篇博客学会的安装
http://www.cnblogs.com/kagome2014/p/kagome2014001.html
下载后的文件目录
由于项目中用的是tomcat服务器,然后把构建出来的文件放在tomact的webapp/plugins下,如下:
启动tomcat服务器时,访问http://127.0.0.1:8080/xxx/plugins/generic/web/viewer.html(xxx是项目名称)
能够看到页面
这是pdf.js的默认读取文件的地址。若想修改默认读取的文件地址,则修改generic/web/viewer.js文件中的DEFAULT_URL的值。
接下来,如何让pdf.js读取我们自己的文件。在pdf.js的请求头里面加上file参数即可。例如在web文件夹下创建了a目录,在里面放入b.pdf文件。读取的路径就是
http://127.0.0.1:8080/xxx/plugins/generic/web/viewer.html?file=/a/b.pdf
(可以通过相对路径去找到文件的位置)
由于需求是嵌在web页面中的,所以我使用了<iframe>标签,使得页面嵌在网页中。似乎完成了需求啊,可是突然发现有两点问题没有解决。
1. 使用了<iframe>标签后发现全屏按钮消失了,全屏用不了
2. 如果文件路径是一个绝对路径或者是网络路径怎么办,能不能把pdf文件以流的形式写入response中呢?
然后又开始不停百度,看论坛,然后自己思考,还是解决了这两个问题,现在依次说一下解决方案。
全屏显示
Pdf.js会通过检测当前环境是否支持全屏来决定是否展示全屏按钮。
似乎是在iframe中,所以该方法得出的结果是不允许全屏,所以不展示全屏按钮。因此我们需要将下面这段判断去掉。
然后在自己实现该全屏按钮的点击事件,将pdf全屏展示。展示的方法应该有很多种,在这就不说了。
绝对路径读取文件
由于我要读取的文件在服务器上的共享盘下,并不在tomcat服务器的项目目录下,因此需要通过绝对路径去读取文件。解决方案是将前面pdf.js中file参数从原来的相对路径地址换成一个网络请求,在服务器端将目标pdf以流的形式返回到response中进行输出展示。
一开始我换成的请求路径是:
http://127.0.0.1:8080/xxx/plugins/generic/web/viewer.html?file=/项目名称/controller请求路径?fileUrl = 文件的绝对路径
但是后来发现get请求中的fileUrl参数并不能传进去,因为在file前面有个问号。然后查看源码,找到了请求的地址。
在这个方法中 前台传递的file参数被赋值,因此我想到的解决方案是将请求路径改成
http://127.0.0.1:8080/xxx/plugins/generic/web/viewer.html?file=/项目名称/controller请求路径&fileUrl = 文件的绝对路径(存在中文记得转码和解码)
就是将fileUrl前的问号替换成& 这样fileUrl以后被当成参数传递。
然后将之前的js代码改成如下
这样后台controller的代码便能收到fileUrl这个参数,服务器端返回流的代码就不展示了。
- 网页中使用pdf.js展示pdf文件,全屏问题以及绝对路径如何读取
- PDF网页展示--PDF.js
- 在网页中展示PDF文件
- 使用PDF.js如何显示pdf文件的电子签章
- 网页展示pdf
- 网页中预览PDF文件
- 网页中显示PDF文件
- 使用PDFBox读取pdf文件
- 使用iText读取PDF文件
- 如何直接在网页中显示PDF文件
- 【转】如何直接在网页中显示PDF文件
- 如何直接在网页中显示PDF文件
- 使用PDF.js在网页显示pdf文件并跳转到指定页码
- PDF查看器Spire.PDFViewer 教程:如何在一个网页中查看多个PDF文件
- pdf.js – 利用HTML5技术读取PDF文件
- 使用js下载pdf文件
- PDF网页显示: object标签使用pdf插件打开中文文件的问题 (WEB开发)
- 基于HTML的PDF展示 pdf.js
- JAVA进阶之连接池
- 学会这个方法,让你跑赢80%的人
- Spring事务隔离级别
- 将字典转换为DataFrame并进行频次统计
- 扩展kmp
- 网页中使用pdf.js展示pdf文件,全屏问题以及绝对路径如何读取
- 如何提高服务器并发处理能力
- ImageView的scaleType属性
- 易东联合:做长尾关键词推广多少钱?北京关键词推广
- React-Native开发环境搭建以及遇到的相关问题1
- 算法13 Plus One
- C语言:数组的学习
- HBase数据读取流程解析
- QT之qss教程-QToolBar