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 clone git://github.com/mozilla/pdf.js.git

構建使用：

$ node make generic

不知道在Windows7上該怎麼用git、node（如果有知道的，可以告訴我下，在此謝過！），所以我就改用linux進行構建（期間有很多心酸歷程，感覺都可以拍成電影了！！！比如說我用git獲取原始碼時，系統提示我git沒有安裝，我用node時，提示我ShellJs沒有安裝，安裝ShellJS，他告訴我要使用npm，意料之中，npm我也沒有安裝...），其實，我們使用pdf.js，最終只需要構建後的內容，大家可以通過這裡進行下載：

http://yunpan.cn/cwmjKF6jKY6Kb  訪問密碼 c14a

構建後的目錄結構為：

有了構建後的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的一段程式碼：

我們可以看到，他預設開啟generic/web/compressed.tracemonkey-pldi-09.pdf檔案，再來看下面這段程式碼：

這就告訴我們，可以通過傳遞file形參來動態指定開啟的pdf檔案！如：

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

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

可以把generic中的內容作為第三方外掛進行使用，在專案中可以像如下存放：

然後頁面可以使用<iframe>標籤來載入pdf

1 <iframe src="<c:url value="/resources/plugin/pdfJs/generic/web/viewer.html" />?file=<c:url value="/publicity/displayPDF.do" />" width="100%" height="800"></iframe>

效果圖，如下：

實質就是我們直接訪問generic/web/viewer.html，然後為其指定一個file形參，用於指定開啟的pdf檔案！我上面使用的流的方式進行指定的。

至此，pdf.js外掛的介紹就告一段落了，第一次寫部落格，如有不到之處，希望大家可以不吝賜教，謝謝！

在此感謝pdf.js的兩位作者！（真心佩服這些外國大師，2個人可以寫一個這麼好的框架，而且還是開源的！）。