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

2024-01-08 17:41:31

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.将解压的包放到项目中，启动tomcat开始访问
访问地址：http://localhost:8080/rescoures/web/viewer.html【根据自己放在项目中的地址进行访问】

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

    办法2：可以通过http://localhost:8080/rescoures/web/viewer.html?file="dome.pdf"进行访问。

  2）访问相对路径的pdf（即服务器上的pdf文件），解决跨域问题【也就是我们在实际项目中的使用】
    1.创建一个index.jsp文件

方法1:可以通过iframe内联框架访问, viewer.html 文件也可以换成jsp文件,没有任何问题

<iframe id="pdfIframe"  src="viewer.html?file=demo.pdf" width="980px;" height="850px"></iframe>

方法2:可以通过后台的形式,将pdf文件转为文件流进行访问

//index.jsp 代码

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
    <TITLE></TITLE>
    <script type="text/javascript">
        $(function(){
        /**
        *如果通过后台访问viewer.html文件的时候, 
        *路径就变为pdfShow.do?file=pdf.Show.do?id=123
        *这样访问不了,所以就会用到encodeURIComponent()函数
        *encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。
        */
            var url = encodeURIComponent("pdfShow.do?id=123");//获取文件流
            //通过后台action访问可以阻断任何用户访问
            $("#pdfIframe").attr("src","pdfShow.do?file="+url);
        });
    </script>
</HEAD>
<body>
<iframe id="pdfIframe"   width="980px;" height="850px"></iframe>
</body>
</html>

//PdfShowAction 后台类代码

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文件

//这里先看下自己功能是否可以实现,如果实现不了就在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在线预览功能。
希望我的这篇文章能够帮助到你们，如果有不理解之处，欢迎留言，看到会回复的，谢谢大家！

码农公寓

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

相关文章