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項目集成的。里面有好多的配置沒有細說。有不清楚了，可以掃描左側二維碼加群找我。