pdfjs使用教程

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的基本簡介，以及pdf如何取得原始碼，之後如何進行建置！

但是他的獲取源碼使用：

$ Git clone Git://Github.com/mozilla/pdf.js.GitgeneiGithub.com/mozilla/pdf.js.

不知道在Windows7上該怎麼用

Git

、node（如果有知道的，可以告訴我下，在此謝過！），所以我就改用linux進行構建（期間有很多心酸歷程，感覺都可以拍成電影了！中，npm我也沒有安裝...），其實，我們使用pdf.js，最終只需要建置後的內容，大家可以透過這裡進行下載：

------------- -----------------------------分割線------------------- -----------------------

免費下載網址在 http://linux.linuxidc.com/使用者名稱與密碼都是www.linuxidc .com具體下載目錄在 /2015年資料/6月/12日/pdf.js使用教學

/

下載方法見 http://www.linuxidc.com/Linux/2013-07/87684. htm

------------------------------------------分割線--- ---------------------------------------

建造後的目錄結構為：

有了建置後的build內容，我們就可以做一個簡單的測試，把generic拷貝到Tomcat的webapps中

啟動Tomcat後，就可以透過：

http://localhost:8080/generic/web/viewer.html

進行訪問！可以看到一個很帥的介面：

generic/web/viewer.html主要是渲染pdf閱讀器的樣式，而generic/web/viewer.js則是指定開啟的pdf檔（當然還有其他功能，但這些都不是我們關心的），我們看位於generic/web/viewer.js的一段程式碼：

使用教學

http://localhost:8080/generic/web/viewer.html?file=qbs.pdf

下面我就介紹下，具體嵌入項目中是如何運用的！

然後頁面可以使用?file=" width="100%" height="800">

效果圖，如下：

pdf存取generic/web/viewer.html，然後為其指定一個file形參，用於指定開啟的pdf檔！我上面使用的流的方式進行指定的。

上面只是一種簡單的使用方式，下面介紹一種複雜點的使用方式：

不知道大家有沒有試過下面這段url請求:

http://localhost:8080/akane/resources/plugin/pdfJs/generic/web/viewer.html?file=/akane/displayPDF.do?id=966c6f0e-3c06-4154-aafd-afdbee5bcb65

🎟應用程式中，可能會根據不同的參數，來選擇展示不同的pdf文件，此時就涉及到傳參的問題了，仔細觀察上面這段url位址會發現，在file請求參數中的值為一個url位址，而這個url位址又追加了自己的請求參數，這就導致一個url位址中出現2個"?"

導致瀏覽器無法正常解析這段url！

一個解決想法是：我們可以把file形參的值，先編碼，然後再解碼來解決這個問題！

此時，就可以請encodeURIComponent()函數出場了！因為其為

js函數，所以需要在文件就緒函數中動態為iframe設定src的值，如下所示：

   

   

 

既然有編碼，那麼就一定要有解碼來解析他，不過這份工作generic/web/viewer.js已經替我們做了，如下所示：