记录一下困扰我多天的问题————PDF.js工具的跨域访问pdf文件

这几天公司要求做一个课件上传的功能，首要当然就是pdf格式的文件了（因为pdf是万能的，啥格式都可以转pdf），当开发文档定下来之后我就开始着手寻找pdf插件，当前就找到了pdf.js（当时也找到了其他pdf工具），刚开始用起来就使用到了一个功能，那就是定位，公司要求可以设置页码与课程相关知识点定位，外部点击就可以跳转到相应的页码，这个问题也困扰我好长时间的。废话不多说 ，先看一下pdf.js下载后加入本地pdf文件后的效果（额。。。。突然发现，公司电脑加密截不了图）

       那就没办法了，只能用代码了（一次只能复制一点

）这里因为是一段一段复制的  如果丢失数据可以留言找我。

上图是pdf.js的标准写法，主要代码在于url后的file中（这里项目名不能写错，也不能访问除此项目以外的文件），功能代码在于后面的参数了（page是你要打开的pdf的默认页码，top是pdf页面离顶部的大小，zoom是指默认打开的缩放（这个zoom可以找viewer.html的260行左右可以配置，1的意思就是100%））

 

感觉还是跑题了，我们现在一般的都是maven项目，在这里我们加载的文件一般都不会再自己本地的服务器而是在单独的文件服务器中，但是pdf.js完美的避开了你的要点，它拒绝访问其他服务器，这里跟我们要的效果大相径庭；但是我们可以手动的去修改，去达到我们要达到的效果。我们要动的就是响应头（如下）：

response.setContentType("application/pdf");
response.setHeader("Access-Control-Allow-Origin", "*");

我查了很多别人写的csdn，都是要加头部，但是我试了更多，结果发现只要这二个就行了，我们传文件的时候，在这一步（iframe中的地址）：

改成这样的：

（因为如果是本地服务器就不用走后台，但是不是本地的所以要到后台走一下即可）详解一下参数：encodeURIComponent（）这个是js中的方法，就是为了解码的，后面是路径，大家都懂，就是我们要到后台controller中处理一下后解码就行了

下面上后台代码：

@RequestMapping("/getFile")
public void getFile(HttpServletRequpublic void getFile(HttpServletRequest request,HttpServletResponse response,String file){
    try{//主要代码    加入头部信息
         response.setContentType("application/pdf");
         response.setHeader("Access-Control-Allow-Origin", "*"); // 解决请求头跨域问题

        ServletOutputStream sos = response.getOutputStream();
        URL url = new URL(file);
        HttpURLConnection httpUrl = (HttpURLConnection)url.openConnection();
         // 连接指定的网络资源
	httpUrl.connect();
         // 获取网络输入流
         BufferedInputStream bis = new BufferedInputStream(httpUrl.getInputStream());
        int b;
        while ((b = bis.read())!= -1){
        sos.write(b);
       }
	sos.close();
    bis.close();	
    }catch(Exception e){
        e.printStackTrace();
    }
}

不能全复制，见谅了有点乱。一开始我还不相信可以，因为根本没有传回去的意思，结果我一运行，可以了，厉害了。是真的可以！！

大家遇到这个问题的可以试试。我写下来就是怕忘了，哈哈哈