當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

PDF.js使用教程

發(fā)布時間：2023/12/16 编程问答 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 PDF.js使用教程小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

1.官網：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文件的第一頁：（有些語句版本不同導致寫法不一樣，踩了好多坑....）

官網例子：https://mozilla.github.io/pdf.js/examples/

坑1：
? ? ?* 之前版本（具體版本分界線我也不知道，我下載的是2.0.943版本）寫法：

PDFJS.workerSrc = '../build/pdf.worker.js';//加載核心庫 PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {})

? ?*但是！！！ 2.0.943版本版本寫法：

pdfjsLib.GlobalWorkerOptions.workerSrc ='../../../../static/js/pdfjs/build/pdf.worker.js'; pdfjsLib.getDocument(url).then(function(pdf){});

坑2：
? ? ?* 官網例子中的寫法：

var scale = 1.5; var viewport = page.getViewport({ scale: scale, });

? ?*但是！！！ 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) {/*** 坑：* 官網上給的例子是這樣寫的* 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編碼的文檔流，進行展示：

<!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">//直接使用官網例子中的文檔吧//atob( 后臺返回的把文檔進行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的字體庫，加進來：

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">//直接使用官網例子中的文檔吧//atob( 后臺返回的把文檔進行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>

總結

以上是生活随笔為你收集整理的PDF.js使用教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。