pdf.js實如今HTML下直接瀏覽pdf文檔，無需插件便可實現

近期，有一個朋友作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，官方已經爲咱們設置好了預覽的皮膚和各類事件，所以，我只須要將官方的庫引進去，會進行本地預覽便可。

若是有人須要代碼或者不明白的能夠加入PDF羣：707875596

做者：慕課講師/河畔一角

前端基於Vue2.6/小程序/小程序雲 + Node.js + MongoDB  全棧的微信支付、微信受權、微信好友/朋友圈分享等全棧課程，歡迎廣大前端開發者購買觀看

http://coding.imooc.com/class/343.html

前端基於Vue2.0 + Node.js + MongoDB  全棧的慕課網課程，歡迎廣大前端開發者購買觀看

http://coding.imooc.com/class/113.html

前端基於React16 + React-Router4.0 + Redux +AntD 慕課首門基於共享單車後臺通用系統上線了，歡迎廣大前端開發者觀看

https://coding.imooc.com/class/236.html