pdf.js跨域加載文件

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

源碼下載