前言
項目中需要前台預覽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注解返回到前台接收。