pdf.js 初使用

首先是下载pdf.js,官网的版本相对比较高,没找到相对应的例子,下载了几个版本后,都使用不了,各种报错,研究了好些时间,费了好些功夫.

最后找的是网上的一个例子,具体忘记了, 下载了人家的pdf.js包,版本是2.0.

 

 

1.把pdfjs包引进来，放在你对应的页面路径下，我的是maven项目，放在了resources下的文件里面。

2.修改viewer.html页面引用的各种css，js路径，不然viewer.html页面渲染不出。还有viewer.js 文件里面引用的路径，需要修改下，引用问题费了好些时间，刚开始只能一个个找。可能pdfjs放的位置比较里面，相对路径比较深。

3.然后把viewer.js 文件里的var DEFAULT_URL行注释掉，默认是读取这个路径下pdf文件，pdf.js自带的例子文件。

 

4.接下来是在你的页面中添加viewer.html跳转路径。我的页面是查询报告的，输入手机号码，获取验证码，点查询按钮后，跳转到viewer.html ,用的是window.location.href，用window.open（）在pc端pdf可以渲染出来，但是在移动端pdf没出来，也不报错，就索性换成了window.location.href，没有继续研究。

window.location.href="../../../content/health/pdfJs/generic/web/viewer.html?file="+encodeURIComponent("http://xxx.xxx?x=0&y="+data.msg);

 

file后面是你要渲染的pdf文件，我是从另一个系统获取到的pdf文件，写了一个url地址，用来下载pdf的，后面的x，y是传给后台的参数。

encodeURIComponent()方法可以对URI进行编码，以便发送给浏览器。有效的URI中不能包含某些字符，例如空格。而这URI编码方法就可以对URI进行编码，它们用特殊的UTF-8编码替换所有无效的字 符，从而让浏览器能够接受和理解。

 

5.下载pdf文件的后台方法，这个费了好些时间，网上有的是文件流，有的是字节流，试了好几种，都没效果，各种报错。最后用的是文件流。因为是两个系统调用，有跨域的问题，在下载的代码前面要-加入如下四行代码。

 

        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods","POST,GET");
        response.setHeader("Access-Control-Allow-Headers","x-requested-with,content-type");
        response.setHeader("Content-Disposition", "attachment;fileName="+java.net.URLEncoder.encode("xx.pdf","UTF-8"));

 

 InputStream is = null;
        OutputStream os = null;
        try {
            is = new FileInputStream(new File(filePath));
            os = response.getOutputStream();
            byte[] bb = new byte[2048];
            int length;
            while ((length = is.read(bb)) > 0) {
                os.write(bb, 0, length);
            }
        } catch (FileNotFoundException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            os.close();
            is.close();
        }
    }

 

6.其他的好像没了，刚开始用这个pdf.js,费了好些时间，各种报错，百度了好久，pdf是出来了，但还是存在很多问题，比如再次打开pdf文件，页面停留在上次浏览的位置；pdf加载缓慢问题；pdf移动端下载问题，有待研究，先把功能搞出来再说。