PDF.js的使用教程
阿新 • • 發佈:2019-01-27
PDF.js是為html5實現的線上預覽pdf框架,所以你的瀏覽器要支援html5才能使用這個框架。
PDF.js要構建後才能使用,以下網址有PDF.js的基本簡介,如何獲取原始碼和構建過程
GitHub: https://github.com/mozilla/pdf.js/
我們只需要使用構建後的PDF.js就行了,大家可以通過以下網址下載構建後的PDF.js:
將下載後的generic檔案拷貝到tomcat的webapps資料夾下:
然後啟動tomcat,輸入以下網址測試:
http://localhost:8080/generic/web/viewer.html
這時就會出現一個酷酷的介面:
generic/web/viewer.html主要是渲染閱讀器的樣式,而generic/web/viewer.js可以指定預設開啟的檔案(當然還有其他功能),開啟viewer.js,找到下面一行程式碼:
這裡指定預設的pdf,要想開啟指定的pdf檔案,可以在http://localhost:8080/generic/web/viewer.html後面加上file引數。例如開啟下面的test.pdf:
就可以使用
http://localhost:8080/generic/web/viewer.html?file=test.pdf
來開啟
以上使用file傳參是比較簡單的方式,只要知道了檔名跟型別就行了。但是這種方式用在專案中的話只能開啟專案裡的pdf檔案,換句話說就是PDF.js預設是不能開啟專案外檔案系統的檔案,這時就需要自己寫控制器來下載pdf檔案。
控制器示例(基於spring boot框架):
/** * 預覽pdf檔案 * @author Mike * @param request * @param response * @param fileName */ @RequestMapping(value = "/downloadPdf", method = RequestMethod.GET) public void pdfStreamHandeler(HttpServletRequest request, HttpServletResponse response,String fileName) { String filePath = "D:/upload/supervision/" + fileName; // System.out.println(fileName); File file = new File(filePath); byte[] data = null; try { FileInputStream input = new FileInputStream(file); data = new byte[input.available()]; input.read(data); response.getOutputStream().write(data); input.close(); } catch (Exception e) { System.out.print("pdf檔案處理異常:" + e.getMessage()); } }
其中fileName要包括檔案字尾名。下面是前臺呼叫控制器的示例:
window.location.href = "/pdfjs/web/viewer.html?file=" + encodeURIComponent("/downloadPdf?fileName=" + number + "." + type);
由於一個url中不能出現兩個?號,所以需要用到js中的encodeURIComponent()來進行編碼,然後viewer.js裡會自動對編碼的內容進行解碼,函式如下:
以上就是PDF.js的使用例項。
參考連結:
http://www.cnblogs.com/kagome2014/p/kagome2014001.html