PDF.js使用教程

1.官网：https://mozilla.github.io/pdf.js/

 

2.下载使用：

把放到项目中：

然后页面引入：

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获取文件的方式

完整代码：

    
    
    



PDF.js 'Hello, base64!' example

（2）拿到后台返回的base64编码的文档流，进行展示：

    
    
    




PDF.js 'Hello, base64!' example

展示的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,
    }); 

完整代码：

    
    
    




PDF.js 'Hello, base64!' example