使用 pdf.js 在網頁中載入 pdf 檔案
在網頁中載入並顯示PDF檔案是最常見的業務需求。例如以下應用場景:(1)在電商網站上購物之後,下載電子發票之前先預覽發票。(2)電子政務管理系統中檢視釋出的公文,公文檔案一般是PDF格式的檔案。
目前隨著瀏覽器技術發展的不斷成熟與強大,大部分的瀏覽器都支援直接把PDF檔案拖到瀏覽器中顯示,最方便的是這個操作不需要額外的外掛支援。但是不同的瀏覽器載入顯示PDF的效果不同。這時就需要專門的JS外掛來處理。Mozilla開源了一個外掛pdf.js,無需任何本地支援就可以在所有主流的瀏覽器上顯示PDF文件,使用起來十分的方便。唯一的要求就是瀏覽器必須支援HTML5。
一、pdf.js 簡介 官網地址:http://mozilla.github.io/pdf.js/,下載穩定版本,目前最新穩定版為v2.2.2281、下載至本地:
2、解壓縮,裡面包含2個目錄
build目錄包含以下內容,其中pdf.js是核心檔案
web目錄包含以下內容,其中viewer.html是pdf檢視器
3、在VS中開啟viewer.html,引用了檢視其的樣式檔案viewer.css、pdf.js核心檔案、檢視器指令碼檔案viewer.js 、資原始檔local.properties。
4、直接在瀏覽器中開啟viewer.html,能正常的顯示pdf檢視器,但是無法顯示pdf檔案。
必須將 pdfjs-2.2.228-dist 包,部署在IIS上之後,通過http方式訪問才能正常的載入顯示pdf格式檔案的內容
5、在IIS中部署之後,通過 http://localhost:8033/pdfjs/web/viewer.html 方式訪問該檢視器。該檢視器中預設載入的是 pdf.js 的使用說明書內容。
二、將 pdf.js 整合到專案網頁中 將解壓縮的內容複製到專案中有多種方式載入載入並檢視pdf檔案內容。
方式1:通過連結方式,在viewer.html頁面中獨立獨立檢視
實現方法:通過<a/> 標籤連結到viewer.html頁面,需要傳遞一個重要的引數【file】,設定為要顯示的pdf檔案的路徑
<a href="Content/pdfjs-2.2.228/web/viewer.html?file=http://localhost:8033/PDFTest/Pdf/專案的5個管理過程組和專案管理知識領域對映關係.pdf">
點選檢視pdf內容</a>
點選a連結,開啟獨立的視窗
方式2:嵌入在網頁中
某些場景下需要將PDF檢視器整合在業務網頁中,便於業務流程的操作
實現方法:通過iframe實現。任然需要傳遞file引數,設定pdf檔案的路徑
<div id="divPdfViewPanel2" style="margin: 5px;"> <iframe src="Content/pdfjs-2.2.228/web/viewer.html?file=http://localhost:8033/PDFTest/Pdf/專案的5個管理過程組和專案管理知識領域對映關係.pdf" width="100%" height="400px;"></iframe> </div>
但是該方法把pdf檔案寫死了。正常情況下都是通過程式動態的設定pdf檔案,這時就需要使用Ajax動態的讀取資料庫或者從其他地方傳遞過來並設定該file引數。
三、載入指定的pdf檔案該方式經測試,載入100M左右的PDF檔案,速度非常快。
網路上還有其他的方法,通過讀取pdf檔案流來實現。如果有業務需求,大家可以嘗試。
四、跨域設定在第二大部分中介紹的2種方法,通過HTTP方式實現,這裡涉及到跨域問題。如果PDF檔案與網站部署在一起,則不存在跨域。如果PDF在網站之外,則涉及到跨域問題。開啟viewer.js檔案,註釋掉以下內容。
還有其他方式也可以實現跨域,網路上有很多優秀的解決方案。但是上述的方法最簡單直接。
五、漢化viewer.html 檢視器的選單功能按鈕的顯示都是英文的
在 pdfjs-2.2.228\web\local目錄下列出了很多種語言的資源包,找到 zh-CN。裡面包含了對應的漢化資訊。
開啟viewer.html,修改其中所有選單的 title 與 span 的內容
全部修改完成後,儲存,再次在瀏覽器中檢視,選單已經顯示為中文了。