请选择 进入手机版 | 继续访问电脑版

pdf.js 使用实例以及实现过程中碰到的问题

[复制链接]
漫舞飞天 发表于 2020-12-31 18:11:33 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
**
pdf.js 使用实例以及实现过程中遇到的问题

**
pdf.js可以实现在html下直接欣赏pdf文档,是一款开源的pdf文档读取剖析插件
pdf.js主要包罗两个库文件,一个pdf.js和一个pdf.worker.js,,一个负责API剖析,一个负责焦点剖析
项目中使用pdf.js实现pdf在线预览 的功能,欣赏过不少的技能帖,感觉技能点都比较零星,花了点时间总结了下我在使用pdf.js的过程,总结下:1.防止自己忘记 2.供各人参考鉴戒
一、下载方式:
1.官方下载:http://mozilla.github.io/pdf.js/,直接下载最新的稳定版


2.兼容ie9及以上的包:
版本号:1.1.159 【下文会提到】
百度网盘地址:https://pan.baidu.com/s/1Phci68Q2XU6W3wLmOurj_g
提取码:ksfo
二维码下载:

注:有关pdf.js的说明请到https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#faq-support这里查察
二、开始实现
1.下载包后,举行解压


2.将解压的包放到项目中,【注意修改viewer.html,viewer.js.pdf.js中引用相关js大概包的文件路径】启动tomcat开始访问
访问地址:http://localhost:8080/rescoures/web/viewer.html【根据自己放在项目中的地址举行访问】

3.
1)访问绝对路径的pdf文件
办法1:可以在viewer.js中var DEFAULT_URL = ‘dome.pdf’;此处设置自己本地pdf的地址;

  1.     办法2:可以通过http://localhost:8080/rescoures/web/viewer.html?file="dome.pdf"举行访问。
复制代码

  1.   2)访问相对路径的pdf(即服务器上的pdf文件),解决跨域问题【也就是我们在实际项目中的使用】    1.创建一个index.jsp文件
复制代码
方法1:可以通过iframe内联框架访问, viewer.html 文件也可以换成jsp文件,没有任何问题
  1. [/code] 方法2:可以通事后台的形式,将pdf文件转为文件流举行访问
  2. //index.jsp 代码
  3. [code]        
复制代码
//PdfShowAction 后台类代码
  1. public class ResPdfShowAction {    protected ActionForward actionPerformed(ActionMapping actionMapping, ActionForm actionForm, HttpServletRequest request, HttpServletResponse response) throws Exception {    //可以写自己需要的代码    //……………………………………    //获取pdf文件的地址        String pdfPath = "../demo.pdf";        //将pdf文件转换为文件流        File file = new File(pdfPath);        BufferedInputStream in = null;        try {            response.setContentType("application/pdf");            in = new BufferedInputStream(new FileInputStream(file));            BufferedOutputStream out = new BufferedOutputStream(response.getOutputStream());            byte[] data = new byte[1024];            int len;            while ((len = in.read(data)) > 0) {                out.write(data, 0, len);            }            out.close();        } catch (Exception e) {            e.printStackTrace();        }        return null;    }}
复制代码
//viewer.js文件
  1. //这里先看下自己功能是否可以实现,如果实现不了就在file的参数背面加个&.pdf,做一个假象,让pdf.js插件认为这个文件流是个pdf文件  var file = 'file' in params ? params.file+"&.pdf" : DEFAULT_URL;
复制代码
4.好了,到这算是完整的实现了。
三、禁止下载,打印,打开文件操纵
1.在viewer.html 文件中找下下列代码,在样式中添加 style="display:none"
注意:在我使用过程中,发现最新板2.5.207或2.6.364的演示功能还没有旧版1.1.159版的演示功能好用,这里自己思量使用什么版本的包。
这里是我自己使用了2.5.207,2.6.364,1.1.1593个版本的包的发现。

2.在viewer.js中
如果是使用的2.5.207 和 2.6.364版本的包
根据自己需求【想要禁止哪个功能的id】注释掉相对应的代码




如果是使用1.1.1593版本的包
注:这里是我自己注释的,没有具体举行测试,总之最后效果是不能使用了
下载功能:我是注释掉了download的一个方法

打开文件和打印功能:我是把viewer.js中的相关代码都给注释掉了[只要是涉及到openFile,print的代码]
演示功能:我感觉这个版本的演示功能贼好用,就没有去掉,如果各人想去掉,就只能自己去看哪段代码是演示功能了。
现在就是这样了,第一次写博客,如有不到之处,希望各人可以不吝见教,谢谢!
在此感谢pdf.js的两位作者!
同时也要感谢网络上各个编写有关pdf.js插件的文章,是他们的文章指引了我,使我可以或许很好的实现pdf在线预览功能。
希望我的这篇文章可以或许资助到你们,如果有不明白之处,接待留言,看到会复兴的,谢谢各人!


来源:https://blog.csdn.net/weixin_45611625/article/details/111974950
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

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

本版积分规则


专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )