天記錄一個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);});
相應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>
最后上一下效果展示截圖：
?
.docx)
