PDF.js使用教程

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：
* 之前版本（具体版本分界线我也不知道，我下载的是2.0.943版本）写法：

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发现中文都没显示出来或者显示的都是错的，发现是没有用到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>

猜你喜欢