PDFJS实现PDF转图片

JavaScript本身不支持PDF转换为图片的功能。但可以使用PDF.js库来将PDF转换为canvas图片，此篇记录一种写法

pdf.js官网

示例（基于jquery，vue）
1.引入js库
引入压缩包build文件夹下pdf.js和pdf.worker.js，以及web文件夹下cmaps文件夹

<script src="../../js/plugin/pdfjs-3.6.172/pdf.js"></script>
<script src="../../js/plugin/pdfjs-3.6.172/pdf.worker.js"></script>

2.创建dom用于渲染

<img :src="imageUrl" class="w-full mb-1" alt="">
<canvas id="the-canvas" style="display: none"></canvas>

3.js方法

/**
 * @param {String} url 文件路径
 * */
previewPdf(url) {
    if (url) {
        let _this = this;
        let imgArr = [];
        pdfjsLib.workerSrc = 'pdf.worker.js';
        let loadingTask = pdfjsLib.getDocument({
            scale: 1,
            url: url,
            cMapUrl: '../../js/plugin/pdfjs-3.6.172/cmaps/', // 解决图片没有汉字的问题
            cMapPacked: true // 解决图片没有汉字的问题
        })
 
        loadingTask.promise.then((pdf) => {
            console.log('PDF loaded');
            let pageNum = pdf.numPages;
            for (let i=1; i<=pageNum; i++) {
                pdf.getPage(i).then(function(page) {
                    console.log('Page loaded');
 
                    let viewport = page.getViewport({
                        scale: 1
                    });
 
                    let canvas = document.createElement("canvas");
                    let context = canvas.getContext('2d');
                    canvas.height = viewport.height;
                    canvas.width = viewport.width;
 
                    let renderContext = {
                        canvasContext: context,
                        viewport: viewport
                    };
                    let renderTask = page.render(renderContext);
                    renderTask.promise.then(function () {
                        console.log('Page rendered');
                        let imgUrl = canvas.toDataURL('image/jpeg'); //转换为base64
                        if (imgUrl) {
                            imgArr[i-1] = imgUrl;
                        }
                        //pdf全部画完结束后操作
                        if (imgArr.length===pageNum&&!isEmpty(imgArr)) {
                            let canvas2 = document.getElementById('the-canvas');
                            let context2 = canvas2.getContext('2d');
                            canvas2.height = viewport.height*pageNum;
                            canvas2.width = viewport.width;
                            let count = 0;
                            for (let j=0; j<imgArr.length; j++) {
                                let IMG = new Image();
                                IMG.src=imgArr[j];
                                IMG.width = viewport.width;
                                IMG.height = viewport.height;
                                IMG.onload = function () {
                                    context2.drawImage(IMG,0,viewport.height*j);
                                    count++;//确保所有img渲染结束后操作
                                    if (count===pageNum) {
                                        this.showCheckPdf = true
                                        let canvas = document.getElementById('the-canvas');
                                        //赋值给img
                                        _this.imgUrl = canvas.toDataURL('image/jpeg')
                                    }
                                }
                            }
                        }
                    });
                });
            }
        }, (reason) => {
            console.error(reason);
        });
 
        function isEmpty(arr) {
            for(let i=0;i<arr.length;i++) {
                if(!arr[i])
                    return true;
            }
            return false;
        }
    }
}