天記錄一個js庫：pdf.js。主要是實作線上打開pdf功能。因為項目需求需要能線上檢視pdf文檔，是以就研究了一下這個控件。
有些人很好奇，線上打開pdf文檔浏覽器不是支援嗎。是的你說的都是現代浏覽器，例如谷歌，360，edg等。
但是很不幸的是我們這個項目是要使用我們最喜歡（很煩）的浏覽器IE。所有要想使IE能夠線上讀取pdf，我就知道兩種辦法第一種下載下傳Acrobat Reader插件，第二就是使用js庫了。
介紹pdf.js
pdf.js是一個開源的js庫。
官網：
http://mozilla.github.io/pdf.js/源碼位址：
https://github.com/mozilla/pdf.js下載下傳并解壓
我們在
http://mozilla.github.io/pdf.js/getting_started/#download選中版本後下載下傳後解壓會生成兩個檔案夾：
這兩個檔案夾核心檔案就是build檔案下的js檔案，web檔案是官方給寫好的封裝示例，你你可選擇使用或者不使用。
├── LICENSE
├── build/
│ ├── pdf.js - 顯示層
│ └── pdf.worker.js - 核心層
└── web/
├── cmaps/ - 字元映射（由核心要求）
├── compressed.tracemonkey-pldi-09.pdf - 測試 pdf
├── debugger.js - 有幫助的PDF調試功能
├── images/ - 觀看者和注釋圖示的圖像
├── l10n.js - 漢化
├── locale/ - 翻譯檔案
├── viewer.css - viewer 頁面樣式
├── viewer.html - viewer 頁面
└── viewer.js - viewer js 使用：
使用pdf.js有兩種方式：
- 第一種使用官方給寫好的示例，簡單來說就是上面提到的下載下傳下來的web檔案夾。
- 第二種就是自己調用API自己寫方法實作，相對于第一種如果自己要的效果不是很多還是自己寫。也不是很複雜很容易實作。官方給的代碼太多修改維護太麻煩。
使用官方示例：
使用官方示例其實就是使用pdfjs已經寫好的viewer.html頁面，例子：
http://mozilla.github.io/pdf.js/web/viewer.html做的功能比較全面。
簡單的來說一下吧，很多人可能下載下傳之後直接打開會報錯，其實那是因為出現了兩個問題：第一個是沒有檔案，第二個是知道寫檔案但是存在跨域。就會産生如下錯誤：
出現這個問題其實也沒事，隻要我們引用到項目後就不會出現了。然後是我們在使用的地方打開這個頁面并且加上檔案即可：
window.location.href = "../../Content/js/PDFShow/padjs/web/viewer.html?file=pdfTest.pdf"; 效果展示：
自己實作分頁版：
我們自己實作的話就不需要web檔案夾下的東西。你就可以删除了。
自己定義實作說起來也是很簡單的，官方上已經給了很多代碼示例了。廢話我就不說了。我就上一下我的代碼吧。
首先引入pdf.js檔案到頁面：
<script src="~/Content/js/PDFShow/padjs/build/pdf.js"></script> 引入pdf.js之後：
//引入pdf.js之後
var url = '../pdfTest.pdf';
PDFJS.workerSrc = '../../Content/js/PDFShow/padjs/build/pdf.worker.js';
//定義變量
var pdfDoc = null,
pageNum = 1,
pageRendering = false,
pageNumPending = null,
scale = 1,
canvas = document.getElementById('the-canvas'),
ctx = canvas.getContext('2d');
function renderPage(num) {
pageRendering = true;
pdfDoc.getPage(num).then(function (page) {
//設定頁面大小
var viewport = page.getViewport(1);
console.log(viewport.width);
var desiredWidth = "1000";
var scale = desiredWidth / viewport.width;
var scaledViewport = page.getViewport(scale);
//var viewport = page.getViewport(scale);
canvas.height = scaledViewport.height;
canvas.width = scaledViewport.width;
//設定背景顔色(無效)
canvas.style.backgroundColor = "red";
//進行檔案讀取加載
var renderContext = {
canvasContext: ctx,
viewport: scaledViewport
};
var renderTask = page.render(renderContext);
renderTask.promise.then(function () {
pageRendering = false;
if (pageNumPending !== null) {
// New page rendering is pending
renderPage(pageNumPending);
pageNumPending = null;
}
});
});
//顯示總頁數
document.getElementById('page_num').textContent = pageNum;
}
//翻頁方法
function queueRenderPage(num) {
if (pageRendering) {
pageNumPending = num;
} else {
renderPage(num);
}
}
function onPrevPage() {
if (pageNum <= 1) {
return;
}
pageNum--;
queueRenderPage(pageNum);
}
//上一頁監聽
document.getElementById('prev').addEventListener('click', onPrevPage);
function onNextPage() {
if (pageNum >= pdfDoc.numPages) {
return;
}
pageNum++;
queueRenderPage(pageNum);
}
//下一頁監聽
document.getElementById('next').addEventListener('click', onNextPage);
PDFJS.getDocument(url).then(function (pdfDoc_) {
pdfDoc = pdfDoc_;
document.getElementById('page_count').textContent = pdfDoc.numPages;
renderPage(pageNum);
}); View Code
相應html代碼：
<body style="background:#404040">
<div>
<button id="prev">上一頁</button>
<button id="next">下一頁</button>
<span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
</div>
<div style="width:100%;height:100%;background:#404040">
<div style=" width:1000px;margin: 0 auto;">
<canvas id="the-canvas"></canvas>
</div>
</div>
</body> 自己實作不分頁版：
雖然分頁很好用，但是确不一定使用所有的場景，比如我就是想一次性打開所有頁面然後滾動檢視跟讀word似的，怎麼辦，有辦法，當然是實作不分頁喽，哈哈。
分頁好了解啊：根據頁數讀取然後把讀取的内容放到畫布上就好了，既然我們明白分頁的原理，那麼我們稍稍改造一下就是不分頁了嗎。
不分頁：我們全部讀出來放到頁面不就好了嗎，簡單來說是這個樣，但是具體思路是=》我們先擷取到所有頁數，然後周遊的把每一頁像分頁一下放到畫布上展示，然後在周遊相同數量畫布來對應每頁的内容，最後展現出來。
好了大緻的思路已經明白了下面就是撸代碼：
還是不要忘記引用js檔案：
<script src="~/Content/js/PDFShow/padjs/build/pdf.js"></script> 頁面布局就可以這樣子了：
<div style="width:100%;height:100%;background:#404040">
<div id="pdf-container" style=" width:1000px;margin: 0 auto;">
</div>
</div> 然後初始化控件吧：
<script>
//引入pdf.js之後
//
var url = '../pdfTest.pdf';
PDFJS.workerSrc = '../../Content/js/PDFShow/padjs/build/pdf.worker.js';
window.onload = function () {
//建立canvas方法
function createPdfContainer(id, className) {
var pdfContainer = document.getElementById('pdf-container');
var canvasNew = document.createElement('canvas');
canvasNew.id = id;
canvasNew.className = className;
pdfContainer.appendChild(canvasNew);
};
//渲染pdf
function renderPDF(pdf, i, id) {
pdf.getPage(i).then(function (page) {
//預設設定文檔的顯示大小
var scale = 1.5;
var viewport = page.getViewport(scale);
//
// 準備用于渲染的 canvas 元素
//
var canvas = document.getElementById(id);
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
//
// 将 PDF 頁面渲染到 canvas 上下文中
//
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
};
//建立和pdf頁數等同的canvas數
function createSeriesCanvas(num, template) {
var id = '';
for (var j = 1; j <= num; j++) {
id = template + j;
createPdfContainer(id, 'pdfClass');
}
}
//讀取pdf檔案，并加載到頁面中
function loadPDF(fileURL) {
PDFJS.getDocument(fileURL).then(function (pdf) {
//用 promise 擷取頁面
var id = '';
var idTemplate = 'cw-pdf-';
var pageNum = pdf.numPages;
//根據頁碼建立畫布
createSeriesCanvas(pageNum, idTemplate);
//将pdf渲染到畫布上去
for (var i = 1; i <= pageNum; i++) {
id = idTemplate + i;
renderPDF(pdf, i, id);
}
});
}
//啟動
loadPDF('../pdfTest.pdf');
};
</script> 最後上一下效果展示截圖：