前端PDF文件转图片方法

更新日期: 2020-11-04阅读: 1.7k分享

复制链接

新浪微博

QQ 好友

扫一扫分享

第一步：先下载pdfjs，网址：PDF下载地址，再引入到项目中，我是标签直接引用的

<script src="pdfjs/build/pdf.js"></script>
<script src="pdfjs/build/pdf.worker.js"></script>

第二步：html 代码添加两行代码，一个是canvas用来绘图，一个是img用来最后展示转换后的pdf图片

<body>
    <img :src="imgUrl" alt="" width="100%" height="auto">
    <canvas id="the-canvas" style="display: none"></canvas>
</body>

第三步：js代码块，主要是将paf通过pdfjs插件绘制到canvas，然后再转换为base64格式的图片

//url参数是pdf地址，imgUrl是最后的base64格式图片
showPdf(url) {
    let _this = this;
    let imgArr = [];
    pdfjsLib.workerSrc = 'pdf.worker.js';
    let loadingTask = pdfjsLib.getDocument(url);
    loadingTask.promise.then(function(pdf) {
        console.log('PDF loaded');
        let pageNum = pdf.numPages;
        // console.log(pageNum);
        for (let i=1; i<=pageNum; i++) {
            pdf.getPage(i).then(function(page) {
                console.log('Page loaded');
 
                let scale = 1;
                let viewport = page.getViewport(scale);
 
                // let canvas = document.getElementById('the-canvas');
                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.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.createElement("canvas");
                        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) {
                                    let canvas = document.getElementById('the-canvas');
                                    //赋值给img
                                    _this.imgUrl = canvas.toDataURL('image/jpeg');
                                }
                            }
                        }
                    }
                });
            });
        }
    }, function (reason) {
        console.error(reason);
    });
 
    function isEmpty(arr) {
        for(let i=0;i<arr.length;i++) {
            if(!arr[i])
                return true;
        }
        return false;
    }
}

链接: https://fly63.com/article/detial/9814

前端PDF文件转图片方法

挑战常规--不要使用||赋予默认值

YodaOS 中是如何生成 API 的

JavaScript 私有成员

web前端学习之路

web前端开发好学吗?

Web前端小白入门

highcharts 时间少8小时问题

巧妙利用引用，将数组转换成树形数组

NodeJS/JWT/Vue 实现基于角色的授权

forward和redirect的区别？http状态码301,302分别代表什么？