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

源碼下載下傳