天記錄一個js庫:pdf.js。主要是實現線上打開pdf功能。因為項目需求需要能線上查看pdf文檔,所以就研究了一下這個控制項。 有些人很好奇,線上打開pdf文檔瀏覽器不是支持嗎。是的你說的都是現代瀏覽器,例如谷歌,360,edg等。 但是很不幸的是我們這個項目是要使用我們最喜歡(很煩)的瀏覽器IE。 ...
天記錄一個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>View Code
最後上一下效果展示截圖: