pdf.js跨域加载文件

pdf.js一个基于Html的工具类，熟悉pdf.js的朋友们很清楚，pdf.js帮助咱们作了不少事。尤为金融类网站会产生不少的报表。须要在线预览。pdf.js绝对是咱们的首选

本地预览

在pdf.js的官网上下载的demo中咱们就能够直接进行预览。官网的案列在web文件夹下的view.html。这里我整理了一个pdf.js精简版的。

这两个demo里面加载的是本地文件。这里没什么说的。其中demo2的效果以下。

代码也很简单：

pdfjs 为咱们作了其余的操做，。咱们经过pdfjs只须要将本地文件当作参数传递给viewer.html就能够了。

远程加载(跨域)

• 经过上面咱们很轻松在实际项目中实现pdf的预览。可是这样的预览存在一个问题。咱们分布式项目中每每资源服务和业务服务不在同一台服务器上。这个时候咱们在对文件进行预览就时跨域操做了。遇到这个问题我想固然的将上面的a.pdf 换成了咱们远程pdf地址了。

• 首先看看咱们的远程文件是否正常
  

• 而后再看看咱们的代码修改是否正常
  

• 全部的就绪后，我很高兴的刷新了demo2的页面并进行了操做。可是使人很失望。报错了
  

• 报错大概的意思就是文件没找到。为何没找到是由于咱们的文件是远程文件。pdf.js跨域了。在网上找了不少答案。有的说是在web.xml配置放置跨域的操做。测试无效。还有的说请求头修改为跨域的可是没说明白。没有实现。最终我发小在viewer.html中获取file文件参数的缘由是须要经过该文件获取文件的文件流从而获取数据对viewer.html记性渲染。因此我换了一下思路。

• 既然是获取文件流为何一开始不直接传递文件流。基于这个想法。我开始实现获取远程地址的文件流。果真让我找到了方法。咱们先经过httpclient爬虫获取远程的文件流。

public InputStream getYCFile(String urlPath) {  
        InputStream inputStream = null;  
        try {  
            try {  
                String strUrl = urlPath.trim();  
                URL url=new URL(strUrl);
                //打开请求链接
                URLConnection connection = url.openConnection();
                HttpURLConnection httpURLConnection=(HttpURLConnection) connection;
                httpURLConnection.setRequestProperty("User-Agent", "Mozilla/4.0 (compatible; MSIE 5.0; Windows NT; DigExt)");
                // 取得输入流，并使用Reader读取
                inputStream = httpURLConnection.getInputStream();
                return inputStream;  
            } catch (IOException e) {  
                System.out.println(e.getMessage());
                inputStream = null;  
            }  
        } catch (Exception e) {  
            System.out.println(e.getMessage());
            inputStream = null;  
        }  
        return inputStream;  
    }

• 就经过这个方法咱们只要传递的地址是正确的，我就能够将该远程文件的文件流返回给你。

• 基于这个方法咱们只须要在springmvc中在前台请求到后台的时候调用该方法就能够获取文件流。在经过response将文件流返回到前台。

• 前台：

<iframe src="../test/js/pdfjs/web/viewer.html?file=<%=basePath%>source/http://192.168.1.184:8080/manage/spirng.pdf" width="100%" height="750"></iframe>

• 最终咱们看看远程的效果。是否是咱们能够预览远程的了。其中的好处无疑减轻服务器压力了。

由于在SSM项目集成的。里面有好多的配置没有细说。有不清楚了，能够扫描左侧二维码加群找我。

源码下载