前端PDF文件转图片方法（你值得收藏）

最新推荐文章于 2024-04-25 10:22:42 发布

隐月丿

最新推荐文章于 2024-04-25 10:22:42 发布

阅读量5.2k

点赞数 3

分类专栏： PDF PDF.JS js 文章标签： javascript html5 vue.js

本文链接：https://blog.csdn.net/xxjiushini/article/details/109473403

版权

PDF 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

PDF.JS

1 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

前端PDF文件转图片方法（你值得收藏）

第一步：先下载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);
    // PDFJS.workerSrc = 'pdf.worker.js';// pdfjsLib为undefined可以换成这行
    // let loadingTask = PDFJS.getDocument(url);// pdfjsLib为undefined可以换成这行
    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;
    }
}

隐月丿

关注

3
点赞
踩
32

收藏

觉得还不错? 一键收藏
21
评论
前端PDF文件转图片方法（你值得收藏）

前端PDF文件转图片方法（你值得收藏）第一步：先下载pdfjs，网址：PDF下载地址，再引入到项目中，我是标签直接引用的<script src="pdfjs/build/pdf.js"></script><script src="pdfjs/build/pdf.worker.js"></script>注意：两个都要引进来第二步：html代码添加两行代码，一个是canvas用来绘图，一个是img用来最后展示转换后的pdf图片<body>
复制链接

扫一扫