pdf.js框架的魅力所在，為其為HTML5實(shí)現(xiàn)的，無(wú)需任何本地支持，而且對(duì)瀏覽器的兼容性也是比較好，要求只有一個(gè)：瀏覽器支持HTML5就好了?。ú贿^(guò)對(duì)于低版本的IE，就只能節(jié)哀了！）

據(jù)說(shuō)IE9以上是OK的，因?yàn)槲冶镜厥荌E11，所以我只在IE11上測(cè)試過(guò)，是通過(guò)的（當(dāng)然火狐，360，我也測(cè)了一下，是可以的）。

因?yàn)轫?xiàng)目開(kāi)發(fā)需要，在線展示PDF，而且要兼容IE，所以就選擇了pdf.js，但是網(wǎng)上對(duì)他的教程很少，我花了一天時(shí)間才搞定，回頭看了一下，也沒(méi)有想象中那么困難，所以決定寫(xiě)一篇博客，以便大家參考！

以下是pdf.js相關(guān)的網(wǎng)址：

GitHub: https://github.com/mozilla/pdf.js/

上面這個(gè)網(wǎng)址，有pdf.js的基本簡(jiǎn)介，以及如何獲取源碼，之后如何進(jìn)行構(gòu)建！

但是他的獲取源碼使用：

$ git clone git://github.com/mozilla/pdf.js.git

構(gòu)建使用：

$ node make generic

不知道在Windows7上該怎么用git、node（如果有知道的，可以告訴我下，在此謝過(guò)！），所以我就改用linux進(jìn)行構(gòu)建（期間有很多心酸歷程，感覺(jué)都可以拍成電影了?。?！比如說(shuō)我用git獲取源碼時(shí)，系統(tǒng)提示我git沒(méi)有安裝，我用node時(shí)，提示我ShellJs沒(méi)有安裝，安裝ShellJS，他告訴我要使用npm，意料之中，npm我也沒(méi)有安裝...），其實(shí)，我們使用pdf.js，最終只需要構(gòu)建后的內(nèi)容，大家可以通過(guò)這里進(jìn)行下載：

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

免費(fèi)下載地址在 http://linux./

用戶名與密碼都是www.

具體下載目錄在 /2015年資料/6月/12日/pdf.js使用教程/

下載方法見(jiàn) http://www./Linux/2013-07/87684.htm

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

構(gòu)建后的目錄結(jié)構(gòu)為：

有了構(gòu)建后的build內(nèi)容，我們就可以做一個(gè)簡(jiǎn)單的測(cè)試，把generic拷貝到Tomcat的webapps中

啟動(dòng)Tomcat后，就可以通過(guò)：

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

進(jìn)行訪問(wèn)！可以看到一個(gè)很帥氣的界面：

generic/web/viewer.html主要是渲染pdf閱讀器的樣式，而generic/web/viewer.js則是指定打開(kāi)的pdf文件（當(dāng)然還有其他功能，不過(guò)這些都不是我們關(guān)心的），我們看位于generic/web/viewer.js的一段代碼：

我們可以看到，他默認(rèn)打開(kāi)generic/web/compressed.tracemonkey-pldi-09.pdf文件，再來(lái)看下面這段代碼：

這就告訴我們，可以通過(guò)傳遞file形參來(lái)動(dòng)態(tài)指定打開(kāi)的pdf文件！如：

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

下面我就介紹下，具體嵌入項(xiàng)目中是如何運(yùn)用的！

可以把generic中的內(nèi)容作為第三方插件進(jìn)行使用，在項(xiàng)目中可以像如下存放：

然后頁(yè)面可以使用<iframe>標(biāo)簽來(lái)加載pdf

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

效果圖，如下：

實(shí)質(zhì)就是我們直接訪問(wèn)generic/web/viewer.html，然后為其指定一個(gè)file形參，用于指定打開(kāi)的pdf文件！我上面使用的流的方式進(jìn)行指定的。

上面只是一種簡(jiǎn)單的使用方式，下面介紹一種復(fù)雜點(diǎn)的使用方式：

不知道大家有沒(méi)有試過(guò)下面這段url請(qǐng)求:

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

 我們?cè)趯?shí)際應(yīng)用中，可能會(huì)根據(jù)不同的參數(shù)，來(lái)選擇展示不同的pdf文件，此時(shí)就涉及到傳參的問(wèn)題了，仔細(xì)觀察上面這段url地址會(huì)發(fā)現(xiàn)，在file請(qǐng)求參數(shù)中的值為一個(gè)url地址，而這個(gè)url地址又追加了自己的請(qǐng)求參數(shù)，這就導(dǎo)致一個(gè)url地址中出現(xiàn)2個(gè)"?"

導(dǎo)致瀏覽器不能正常解析這段url！

一種解決思路是：我們可以把file形參的值，先編碼，然后再解碼來(lái)解決這個(gè)問(wèn)題！

此時(shí)，就可以請(qǐng)encodeURIComponent()函數(shù)出場(chǎng)了！因?yàn)槠錇閖s函數(shù)，所以需要在文檔就緒函數(shù)中動(dòng)態(tài)為iframe設(shè)置src的值，如下所示：

<%@ page contentType="text/html;charset=GBK" language="java" %>
<%@ taglib prefix="c" uri="http://java./jsp/jstl/core" %>
<script type="text/javascript">
    $(function(){
        $("#displayPdfIframe").attr("src",'<c:url value="/resources/plugin/pdfJs/generic/web/viewer.html" />?file=' + encodeURIComponent('<c:url value="/displayPDF.do?id=${id}"/>'));
    });
</script>
<div class="ctrlDiv">
    <div class="eleContainer elePaddingBtm">
        <iframe id="displayPdfIframe" width="100%" height="100%"></iframe>
    </div>
</div> 

既然有編碼，那么就一定要有解碼來(lái)解析他，不過(guò)這個(gè)工作generic/web/viewer.js已經(jīng)替我們做過(guò)了，如下所示：

至此，pdf.js插件的介紹就告一段落了，第一次寫(xiě)博客，如有不到之處，希望大家可以不吝賜教，謝謝！

在此感謝pdf.js的兩位作者！（真心佩服這些外國(guó)大師，2個(gè)人可以寫(xiě)一個(gè)這么好的框架，而且還是開(kāi)源的！）。

本文永久更新鏈接地址：http://www./Linux/2015-06/118728.htm