使用 pdf.js 在網頁中載入 pdf 文件

2019 年 10 月 29 日
筆記

在網頁中載入並顯示PDF文件是最常見的業務需求。例如以下應用場景：（1）在電商網站上購物之後，下載電子發票之前先預覽發票。（2）電子商務管理系統中查看發布的公文，公文文件一般是PDF格式的文件。

目前隨著瀏覽器技術發展的不斷成熟與強大，大部分的瀏覽器都支援直接把PDF文件拖到瀏覽器中顯示，最方便的是這個操作不需要額外的插件支援。但是不同的瀏覽器載入顯示PDF的效果不同。這時就需要專門的JS插件來處理。Mozilla開源了一個插件pdf.js，無需任何本地支援就可以在所有主流的瀏覽器上顯示PDF文檔，使用起來十分的方便。唯一的要求就是瀏覽器必須支援HTML5。

一、pdf.js 簡介

官網地址：http://mozilla.github.io/pdf.js/，下載穩定版本，目前最新穩定版為v2.2.228

1、下載至本地：

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>