PDF.js使用教程
生活随笔
收集整理的這篇文章主要介紹了
PDF.js使用教程
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
1.官網(wǎng)：https://mozilla.github.io/pdf.js/
?
2.下載使用：
把放到項目中：
然后頁面引入：
<!-- 使用自己的路徑--> <script type="text/javascript" src="../build/pdf.js"></script>3.兩種方式展示
第一種：使用pdfjs插件中自帶的viewer.html展示，這個參照:https://www.cnblogs.com/kagome2014/p/kagome2014001.html
第二種：使用pdfjs插件的pdf.js展示pdf文件的第一頁：（有些語句版本不同導(dǎo)致寫法不一樣，踩了好多坑....）
官網(wǎng)例子：https://mozilla.github.io/pdf.js/examples/
坑1：
? ? ?* 之前版本（具體版本分界線我也不知道，我下載 的是2.0.943版本）寫法：
? ?*但是！！！ 2.0.943版本版本寫法：
pdfjsLib.GlobalWorkerOptions.workerSrc ='../../../../static/js/pdfjs/build/pdf.worker.js'; pdfjsLib.getDocument(url).then(function(pdf){});坑2：
? ? ?* 官網(wǎng)例子中的寫法：
? ?*但是！！！ 2.0.943版本版本寫法：
var scale = 1.5; var viewport = page.getViewport(scale);使用pdfjs插件的pdf.js展示pdf文件也有兩種方式：
（1）使用url獲取文件的方式
完整代碼：
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>'Hello, world!' example</title><style type="text/css">#the-canvas {border:1px solid black;}</style> </head> <body> <script src="../../../../static/js/pdfjs/build/pdf.js"></script> <h1>PDF.js 'Hello, base64!' example</h1> <canvas id="the-canvas"></canvas> </body> <script type="text/javascript">/***坑：* 之前版本（具體版本分界線我也不知道，我下載 的是2.0.943版本）寫法：* PDFJS.workerSrc = '../build/pdf.worker.js';//加載核心庫* PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {* * })* 2.0.943版本寫法：* pdfjsLib.GlobalWorkerOptions.workerSrc ='../build/pdf.worker.js';* pdfjsLib.getDocument(url).then(function(pdf){** });*/pdfjsLib.GlobalWorkerOptions.workerSrc ='../../../../static/js/pdfjs/build/pdf.worker.js';var loadingTask = pdfjsLib.getDocument({ url: _url, });// _url為后臺請求pdf流的路徑loadingTask.promise.then(function(pdf) {pdf.getPage(1).then(function(page) {/*** 坑：* 官網(wǎng)上給的例子是這樣寫的* var scale = 1.5;* var viewport = page.getViewport({ scale: scale, });* 但是！！我們要這樣寫：* var scale = 1.5;* var viewport = page.getViewport(scale);*/var scale = 1.5;var viewport = page.getViewport(scale);var canvas = document.getElementById('the-canvas');var context = canvas.getContext('2d');canvas.height = viewport.height;canvas.width = viewport.width;var renderContext = {canvasContext: context,viewport: viewport,};page.render(renderContext);});}); </script> </html>（2）拿到后臺返回的base64編碼的文檔流，進(jìn)行展示：
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>'Hello, world!' base64 example</title><style type="text/css">#the-canvas {border:1px solid black;}</style> </head> <body> <!-- 自己的路徑 --> <script src="../build/pdf.js"></script> <h1>PDF.js 'Hello, base64!' example</h1> <canvas id="the-canvas"></canvas> </body> <script type="text/javascript">//直接使用官網(wǎng)例子中的文檔吧//atob( 后臺返回的把文檔進(jìn)行base64編碼之后的String )var pdfData = atob('JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwog' +'IC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAv' +'TWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0K' +'Pj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAg' +'L1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+' +'PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9u' +'dAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2Jq' +'Cgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJU' +'CjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVu' +'ZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4g' +'CjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAw' +'MDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9v' +'dCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G');pdfjsLib.GlobalWorkerOptions.workerSrc ='../build/pdf.worker.js';//自己的路徑var loadingTask = pdfjsLib.getDocument({ data: pdfData, });// loadingTask.promise.then(function(pdf) {pdf.getPage(1).then(function(page) {var scale = 1.5;var viewport = page.getViewport(scale);var canvas = document.getElementById('the-canvas');var context = canvas.getContext('2d');canvas.height = viewport.height;canvas.width = viewport.width;var renderContext = {canvasContext: context,viewport: viewport,};page.render(renderContext);});}); </script> </html>展示的pdf發(fā)現(xiàn)中文都沒顯示出來或者顯示的都是錯的，發(fā)現(xiàn)是沒有用到pdfjs的字體庫，加進(jìn)來：
var CMAP_URL = '../web/cmaps/';//自己的pdfjs字庫的路徑pdfjsLib.GlobalWorkerOptions.workerSrc ='../build/pdf.worker.js';//自己的路徑var loadingTask = pdfjsLib.getDocument({data: pdfData,cMapUrl: CMAP_URL,cMapPacked: true,});完整代碼：
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>'Hello, world!' base64 example</title><style type="text/css">#the-canvas {border:1px solid black;}</style> </head> <body> <!-- 自己的路徑 --> <script src="../build/pdf.js"></script> <h1>PDF.js 'Hello, base64!' example</h1> <canvas id="the-canvas"></canvas> </body> <script type="text/javascript">//直接使用官網(wǎng)例子中的文檔吧//atob( 后臺返回的把文檔進(jìn)行base64編碼之后的String )var pdfData = atob('JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwog' +'IC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAv' +'TWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0K' +'Pj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAg' +'L1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+' +'PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9u' +'dAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2Jq' +'Cgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJU' +'CjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVu' +'ZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4g' +'CjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAw' +'MDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9v' +'dCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G');var CMAP_URL = '../web/cmaps/';//自己的pdfjs字庫的路徑pdfjsLib.GlobalWorkerOptions.workerSrc ='../build/pdf.worker.js';//自己的路徑var loadingTask = pdfjsLib.getDocument({data: pdfData,cMapUrl: CMAP_URL,cMapPacked: true,}); loadingTask.promise.then(function(pdf) {pdf.getPage(1).then(function(page) {var scale = 1.5;var viewport = page.getViewport(scale);var canvas = document.getElementById('the-canvas');var context = canvas.getContext('2d');canvas.height = viewport.height;canvas.width = viewport.width;var renderContext = {canvasContext: context,viewport: viewport,};page.render(renderContext);});}); </script> </html>?
總結(jié)
以上是生活随笔為你收集整理的PDF.js使用教程的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ubuntu系统启动项的修改
- 下一篇： netty原理之蔚蓝天空