【Java】web線上開啟PDF(pdf.js教程)
阿新 • • 發佈:2019-01-10
pdf.js框架的魅力所在,為其為HTML5實現的,無需任何本地支援,而且對瀏覽器的相容性也是比較好,要求只有一個:瀏覽器支援HTML5就好了!(不過對於低版本的IE,就只能節哀了!)
據說IE9以上是OK的,因為我本地是IE11,所以我只在IE11上測試過,是通過的(當然火狐,360,我也測了一下,是可以的)。
因為專案開發需要,線上展示PDF,而且要相容IE,所以就選擇了pdf.js,但是網上對他的教程很少,我花了一天時間才搞定,回頭看了一下,也沒有想象中那麼困難,所以決定寫一篇部落格,以便大家參考!
以下是pdf.js相關的網址:
GitHub: https://github.com/mozilla/pdf.js/
上面這個網址,有pdf.js 的基本簡介,以及如何獲取原始碼,之後如何進行構建!
獲取原始碼使用(首先要先裝Git【點選->安裝過程回顧】):
當然,既然有編碼,那麼就一定要有解碼來解析他,不過這個工作generic/web/viewer.js已經替我們做過了,如下所示:
據說IE9以上是OK的,因為我本地是IE11,所以我只在IE11上測試過,是通過的(當然火狐,360,我也測了一下,是可以的)。
因為專案開發需要,線上展示PDF,而且要相容IE,所以就選擇了pdf.js,但是網上對他的教程很少,我花了一天時間才搞定,回頭看了一下,也沒有想象中那麼困難,所以決定寫一篇部落格,以便大家參考!
以下是pdf.js相關的網址:
GitHub: https://github.com/mozilla/pdf.js/
上面這個網址,有pdf.js
獲取原始碼使用(首先要先裝Git【點選->安裝過程回顧】):
$ git clone git://github.com/mozilla/pdf.js.git
構建使用:$ node make generic
其實,我們使用pdf.js,最終只需要構建後的內容,大家可以通過這裡進行下載:
我整合好的js
【點選下載->build.rar】
下面我就介紹下,具體嵌入專案中是如何運用的!
可以把generic中的內容作為第三方外掛進行使用,在專案中可以像如下存放:
我是放在plugins下的,把generic下的build和web、LICENSE都複製過來
專案架構:
http://localhost:8080/TestWeb/resources/plugins/pdfJs/web/viewer.htmll?file=【?】.pdf
【?】問號是輸入pdf的所在的位置
頁面程式碼如下:
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>線上顯示PDF</title> </head> <body> <iframe id="displayPdfIframe" width="100%" height="800" src="<c:url value="/resources/plugins/pdfJs/web/viewer.html" />?file=<c:url value="/resources/pdf/1.pdf"/>"> </iframe> </body> </html>
顯示效果:
這就可以線上閱讀pdf了,是不是很簡單!
Ps:
我們在實際應用中,可能會根據不同的引數,來選擇展示不同的pdf檔案,此時就涉及到傳參的問題了,仔細觀察上面這段url地址會發現,在file請求引數中的值為一個url地址,而這個url地址又追加了自己的請求引數,這就導致一個url地址中出現2個"?"
導致瀏覽器不能正常解析這段url!
一種解決思路是:我們可以把file形參的值,先編碼,然後再解碼來解決這個問題!
此時,就可以請encodeURIComponent()函數出場了!因為其為js函式,所以需要在文件就緒函式中動態為iframe設定src的值,如下所示:
<%@ page contentType="text/html;charset=utf-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script type="text/javascript">
$(function(){
$("#displayPdfIframe").attr("src",'<c:url value="/resources/plugins/pdfJs/web/viewer.html" />?file=' + encodeURIComponent('<c:url value="/showPDF.do?id=${id}"/>'));
});
</script>
<div class="ctrlDiv">
<div class="eleContainer elePaddingBtm">
<iframe id="displayPdfIframe" width="100%" height="100%"></iframe>
</div>
</div>
當然,既然有編碼,那麼就一定要有解碼來解析他,不過這個工作generic/web/viewer.js已經替我們做過了,如下所示:
至此,pdf.js外掛的介紹就告一段落了,如有不懂,大家可以加我們的技術群,謝謝!