近期，有一個朋友做B端，伺服器存了大量的金融類資料，很多都是pdf文件，他現在的做法是，先將pdf文件轉換成flash,再放到瀏覽器上給使用者瀏覽，但是他告訴我，這種體驗太差了，而且很好資源，空間已經快不夠了，向我諮詢有沒有可以直接讀取pdf文件的，我之前也沒做過，於是，我簡單搜尋了一下，還真是有，下面給大家整理出來，供大家參考。

pdf.js是一款開源的pdf文件讀取解析外掛，據說在HTML5下誕生的，對於主流的瀏覽器基本都支援。

官網GitHub地址如下：https://github.com/mozilla/pdf.js

由於官網專案檔案過多，不太容易理解，因此，我自己針對此專案做了一個簡單的Demo，Demo參考地址如下：

1.新視窗瀏覽pdf文件：http://www.51purse.com/pdf/web/viewer.html?name=b.pdf

2.點選連線讀取第一頁的pdf文件：http://www.51purse.com/pdf/web/demo1.html

3.點選連線，選擇需要開啟的檔案，進行pdf預覽：http://www.51purse.com/pdf/web/demo2.html

pdf.js主要包含兩個庫檔案，一個pdf.js和一個pdf.worker.js，，一個負責API解析，一個負責核心解析

比如Demo1，點選連線，可在當前頁面開啟一個pdf文件，進行預覽，程式碼剖析

1.引入pdf.js

2.解析讀取pdf

function showPdf(){

PDFJS.workerSrc = '../build/pdf.worker.js';//載入核心庫
PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
//
// 獲取第一頁資料
//
pdf.getPage(1).then(function getPageHelloWorld(page) {
var scale = 1.5;
var viewport = page.getViewport(scale);

//
// Prepare canvas using PDF page dimensions
//
 
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;

//
// Render PDF page into canvas context
//
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
});

}

3.設定HTML標籤

<a href="javascript:void(0)" target="_blank" onclick="showPdf()">顯示pdf文件</a>

<canvas id="the-canvas"></canvas>

4.demo1是通過呼叫API自己解析，通常，我們直接使用官網的Demo，比如viewer.html，或者Demo2，官方已經為我們設定好了預覽的面板和各種事件，因此，我只需要將官方的庫引進去，會進行本地預覽即可。

如果有人需要程式碼或者不明白的可以加入前端開發群：326936159

或者給我發郵件進行諮詢：[email protected]