前台 使用pdf.js插件实现预览pdf
前言
项目中需要前台预览pdf，网上查了一下发现了pdf预览插件，使用pdf.js，完美的实现了pdf的预览需求，网上博客有很多介绍的，但是发现对于刚入门的来说不够简单，详细，现特地记录一番，以免以后花费时间查找，也给有需要的朋友提供一个简单的参考。
下载文件：
首先需要去官网插件，地址：https://mozilla.github.io/pdf.js/ ，下载下来是一个pdfjs-2.0.943-dist.zip的压缩文件，解压后下面有两个文件夹，build、和web。build文件夹下的主要放的是pdf.js和相应的资源文件，web文件夹下的存放有预览的入口即viewer.html文件。直接点击打开viewer.html即可看见插件预览功能界面，除了viewer.js还包括了需要的js、cs、images、和国际化等资源文件。
使用：
将下载的文件放入你的项目中，为了分类我是新建了一个文件夹存放下载的所有文件，结构如下：
目录结构可以自定义，不过由于有些依赖于一些静态资源文件，所以需要修改一些文件的路径，这里注意一下：
1、首先是你的viewer.html引入的资源文件（js，css、locale.properties）的路径。
2、viewer.js配置有 imageResourcesPath：资源图片路径，根据你存放的目录配置，../pdfjs/images/；workerSrc：配置pdf.worker.js的路径，../pdfjs/build/pdf.worker.js；cMapUrl：配置cmaps的路径，../pdfjs/cmaps/ 需要修改的基本就这些。
3、如果你使用viewer.html，使用的是动态的页面（jsp等）可以把viewer.html修改成你需要的页面即可，body的内容不需要修改。然后引入
viewer.css、locale.properties、pdf.js、viewer.js四个文件。
4、需要给页面返回二进制流，在页面加载完成的时候发送请求到后台，后台response二进制流，下面给出前端js和java后台实现代码：
前端：
var data="id=${id}";//文件id
var url="${hostUrl}/works/doc/getfile";//请求路径
var xhr = new XMLHttpRequest();
xhr.onload = function () {
var uint8Array=new Uint8Array(xhr.response);//接收数据
window.PDFViewerApplication.open(uint8Array);
};
try {
xhr.open('POST', url,true);//发送post请求
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');//设置请求头
xhr.responseType = 'arraybuffer';//设置返回类型
xhr.send(data);//发送请求
} catch (e) {
console.info(e);
}
后台java代码：这里由于涉及到实际业务，只记录主要的返回二进制流到客户端的代码。
long contentLength=file.length();
InputStream ins=null;
response.setContentType("application/force-download");// 设置强制下载不打开
//火狐下载文件时文件名有空格会导致文件名显示不全,需要在名称加双引号
response.addHeader("Content-Disposition", "attachment;fileName=\"" + new String(file.getName().getBytes("UTF-8"),"iso-8859-1") + "\"");
//response.addHeader("Content-Length", Long.toString(contentLength));
OutputStream os =null;
byte[] buffer = new byte[1024];
//文件内容大于2KB则压缩
if(contentLength > 2048){
response.addHeader("Content-Encoding", "gzip");
ins= new BufferedInputStream(new FileInputStream(file));
os = new GZIPOutputStream(response.getOutputStream());
}else{
ins = new FileInputStream(file);
os = response.getOutputStream();
}
int len = -1;
while ((len = ins.read(buffer)) != -1) {
os.write(buffer, 0, len);
}
os.flush();
os.close();
ins.close();
ins=null;
这里只需要传入文件对象和一个HttpServletResponse即可，直接用responseBody注解返回到前台接收。
