前端页面在线预览PDF 之 pdf.js

首先发一下，我学习的：参考资料

对于没有接触过在线预览pdf的码友可能会感到陌生，了解之后觉得挺简单的。

1、先在网上下载pdf.js，也可以直接网盘下载build.zip

2、打开\build\generic\web下面的viewer.js文件，修改：

var DEFAULT_URL = 'compressed.tracemonkey-pldi-09.pdf'；

改成 var DEFAULT_URL = ‘’;

3、把修改好的build文件夹整个拷贝，放到自己项目的静态文件夹下面，一定要记

好放的位置，因为一会还有读取；

4、写一个用来展示pdf的窗口，这里用window.location.href(src);

 function pdfJs(id,type){
     var src = "http://localhost:8080/项目名/static/plugins/build/generic/web/viewer.html? file="+encodeURIComponent("/项目名/跳转的url?id="+id+"&type="+type);
         window.location.href(src);
     }

注：这里src的前半部分指的是pdf.js中用来预览pdf的视图页面。后半部分指的是用来携带参数进行后台请求的url地址，但是地址必须要写项目名称，其中encodeURIComponent 是用来进行对url编解码的，防止在一个url中存在多个?导致的url解析错误。

5、通过字节流输出pdf文件

@RequestMapping(value ="/builder/previewPdf")
	    public void viewPdf(HttpServletRequest request,HttpServletResponse response,String id,String type) throws Exception {
		String filePath = "";
		/*这里可以写业务逻辑，从数据库获取文件路径*/
       File file = new File(filePath);
       try {
    	   response.setContentType("application/pdf");  
    	   FileInputStream in = new FileInputStream(file);  
    	   OutputStream out = response.getOutputStream();  
    	   byte[] b = new byte[1024];  
    	   while ((in.read(b)) != -1) {  
    	       out.write(b);  
    	   }  
    	   out.flush();  
    	   in.close();  
    	   out.close(); 
    	  
       } catch (Exception e) {
    	   e.printStackTrace();
    	  // System.out.print("pdf文件处理异常：" + e.getMessage());
       }
	}

6、在你的浏览器窗口中会自动跳出一个新的页面来显示pdf文件