近期，有一個(gè)朋友做B端，服務(wù)器存了大量的金融類數(shù)據(jù)，很多都是pdf文檔，他現(xiàn)在的做法是，先將pdf文檔轉(zhuǎn)換成flash,再放到瀏覽器上給用戶瀏覽，但是他告訴我，這種體驗(yàn)太差了，而且很好資源，空間已經(jīng)快不夠了，向我咨詢有沒有可以直接讀取pdf文檔的，我之前也沒做過，于是，我簡單搜索了一下，還真是有，下面給大家整理出來，供大家參考。
pdf.js是一款開源的pdf文檔讀取解析插件，據(jù)說在HTML5下誕生的，對(duì)于主流的瀏覽器基本都支持。
官網(wǎng)GitHub地址如下：https://github.com/mozilla/pdf.js
pdf.js主要包含兩個(gè)庫文件，一個(gè)pdf.js和一個(gè)pdf.worker.js，，一個(gè)負(fù)責(zé)API解析，一個(gè)負(fù)責(zé)核心解析
比如Demo1，點(diǎn)擊連接，可在當(dāng)前頁面打開一個(gè)pdf文檔，進(jìn)行預(yù)覽，代碼剖析
1.引入pdf.js
2.解析讀取pdf
function showPdf(){
PDFJS.workerSrc = '../build/pdf.worker.js';//加載核心庫
PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
//
// 獲取第一頁數(shù)據(jù)
//
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.設(shè)置HTML標(biāo)簽
<a href="javascript:void(0)" target="_blank" onclick="showPdf()">顯示pdf文檔</a> <canvas id="the-canvas"></canvas>
4.demo1是通過調(diào)用API自己解析，通常，我們直接使用官網(wǎng)的Demo，比如viewer.html，或者Demo2，官方已經(jīng)為我們?cè)O(shè)置好了預(yù)覽的皮膚和各種事件，因此，我只需要將官方的庫引進(jìn)去，會(huì)進(jìn)行本地預(yù)覽即可。