vue中使用PDF.js实现PDF文件预览

目前是直接使用npm install pdfjs-dist方式（目录如下图），

其中以下两个文件必须引入：

import pdfJS from 'pdfjs-dist';
import 'pdfjs-dist/build/pdf.worker';

这两个文件包含了获取、解析和展示PDF文档的方法，但是解析和渲染PDF需要较长的时间，可能会阻塞其他JS代码的运行。

为解决这个问题，pdf.js使用了Web Workers。

考虑到用户可能不会使用该文件预览功能，咱们可以使用按需加载的方式：

components: {
    pdfViewer: r => require.ensure([], () => r(require('./pdfViewer')), '../pdfViewer')
}

其中pdfViewer就是咱们实现的pdf预览组件。

js代码

var url = 'test.pdf';

let loadingTask = pdfJS.getDocument(path); // 返回的是一个promise
loadingTask.promise.then(pdf => {
    return pdf.getPage(1); 
}).then(page => {
    // 设置展示比例
    var scale = 1.5;
    // 获取pdf尺寸
    var viewport = page.getViewport(scale);
    // 获取需要渲染的元素
    var canvas = document.getElementById('pdf-canvas');
    var context = canvas.getContext('2d');
    // 设置canvas宽高
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    
    var renderContext = {
        canvasContext: context,
        viewport: viewport
    };
    
    page.render(renderContext);
});

但如果要实现PDF文档中文本可被选中及复制功能则还需要引入：

import { TextLayerBuilder } from 'pdfjs-dist/web/pdf_viewer';
import 'pdfjs-dist/web/pdf_viewer.css';

具体代码如下（实现了文本复制的功能） 

主要JS 

let path = 'https://cdn.chime.me/doc/fs/upload/2019122/22/c215b689-a3d6-4d6d-9e6b-2219fdc85552/test.pdf';
let container = document.getElementById('pdfViewer');
            pdfJS.getDocument(path).then((pdf) => {
                for (let i = 1; i <= pdf.numPages; i++) {
                   pdf.getPage(i).then((page) => {
                        let viewport = page.getViewport({scale: 1});
                        let pageDiv = document.createElement('div');
                        pageDiv.setAttribute('id', 'page-' + (page.pageIndex + 1));
                        container.appendChild(pageDiv);
                        let canvas = document.createElement('canvas');
                        pageDiv.appendChild(canvas);
                        let context = canvas.getContext('2d');
                        canvas.height = viewport.height;
                        canvas.width = viewport.width;
                        
                        let renderContext = {
                            canvasContext: context,
                            viewport: viewport
                        };
                        
                        page.render(renderContext).then(function () {
                            return page.getTextContent();
                        }).then((textContent) => {
                            // 创建文本图层div
                            const textLayerDiv = document.createElement('div');
                            textLayerDiv.setAttribute('class', 'textLayer');
                            // 将文本图层div添加至每页pdf的div中
                            document.getElementById(`page-${i}`).append(textLayerDiv);
                                            
                            // 创建新的TextLayerBuilder实例
                            let textLayer = new TextLayerBuilder({
                                textLayerDiv: textLayerDiv,
                                pageIndex: page.pageIndex,
                                viewport: viewport
                            });
                                            
                            textLayer.setTextContent(textContent);
                            textLayer.render();
                        });
                    }, (err) => {
                        console.log(err, '-------err---------');
                    });
                }
            }, (reason) => {
                console.error(reason);
            });

css 

#pdfViewer > div {
        position: relative;
        margin: 0 auto;
    }

我们可以看下DOM结果：

完整代码请看https://github.com/zxl925768661/fileViewer 

参考资料： PDF.js实现个性化PDF渲染（文本复制）

https://github.com/mozilla/pdfjs-dist