第一步：先下载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://blog.csdn.net/xxjiushini/article/details/109473403?utm_medium=distribute.pc_category.none-task-blog-hot-6.nonecase&depth_1-utm_source=distribute.pc_category.none-task-blog-hot-6.nonecase

前端PDF文件转图片方法的更多相关文章

  1. 深入学习python解析并读取PDF文件内容的方法

    这篇文章主要学习了python解析并读取PDF文件内容的方法,包括对学习库的应用,python2.7和python3.6中python解析PDF文件内容库的更新,包括对pdfminer库的详细解释和应 ...

  2. 【使用Itext处理PDF文档（新建PDF文件、修改PDF文件、PDF中插入图片、将PDF文件转换为图片）】

    iText简介 iText是著名的开放源码的站点sourceforge一个项目,是用于生成PDF文档的一个java类库.通过iText不仅可以生成PDF或rtf的文档,而且可以将XML.Html文件转 ...

  3. 深入学习Python解析并解密PDF文件内容的方法

    前面学习了解析PDF文档,并写入文档的知识,那篇文章的名字为深入学习Python解析并读取PDF文件内容的方法. 链接如下:https://www.cnblogs.com/wj-1314/p/9429 ...

  4. JavaWeb项目生成PDF文件添加水印图片并导出

    一.前言 首先需要在Maven中添加相应的jar包依赖,若项目没用到Maven,也可自行下载相应所需的jar包(itextpdf.jar 与 itext-asian.jar),如下图所示.点此下载 M ...

  5. C#如何在PDF文件添加图片印章

    文档中添加印章可以起一定的作用,比如,防止文件随意被使用,或者确保文档内容的安全性和权威性.C#添加图片印章其实也有很多实现方法,这里我使用的是免费的第三方软件Free Spire.PDF,向大家阐述 ...

  6. Java给图片和PDF文件添加水印(图片水印和文字水印)

    有时候我们看到的图片或者PDF文件会自动加上水印.分为文字水印和图片水印. ----------------------------图片水印---------------------------- 1 ...

  7. 使用Python爬取微信公众号文章并保存为PDF文件(解决图片不显示的问题)

    前言 第一次写博客,主要内容是爬取微信公众号的文章,将文章以PDF格式保存在本地. 爬取微信公众号文章(使用wechatsogou) 1.安装 pip install wechatsogou --up ...

  8. C# PDF文件转图片

    参考:https://blog.csdn.net/lai124793549/article/details/53392281 https://www.cnblogs.com/xiewei123/p/1 ...

  9. 用 ghostscript 转化PDF文件为图片 的参数设置

    example: gswin32 -dSAFER -dBATCH -dNOPAUSE -r300 -dTextAlphaBits=4 -dGraphicsAlphaBits=4 -sDEVICE=jp ...

随机推荐

  1. Web服务器-并发服务器-长连接（3.4.4）

    @ 目录 1.说明 2.代码 关于作者 1.说明 每次new_socket都被强制关闭,造成短连接 所提不要关闭套接字 但是不关闭的话,浏览器不知道发完没有啊 此时用到header的属性Content ...

  2. [.NET] - 在Create一个RSA密钥的是要注意的长度问题

    有时候我们需要自己手动的创建RSA密钥,但是在密钥创建之后,在使用的时候会有类似密钥长度不正确的错误信息被抛出,那可能就是在创建一个RSA密钥的时候,对于的elements长度没设置正确,所以的ele ...

  3. python序列（五）切片操作

    功能:截取列表中的任何部分. 切片适用于列表.元组.字符串.range对象等类型.. 格式:[::]切片使用两个冒号分隔的3个数字来完成. 第一个数字表示切片开始位置(默认为0). 第二个数字表示切片 ...

  4. spark 系列之一 RDD的使用

    spark中常用的两种数据类型,一个是RDD,一个是DataFrame,本篇主要介绍RDD的一些应用场景见代码本代码的应用场景是在spark本地调试(windows环境) /** * 创建 spark ...

  5. 蒲公英 · JELLY技术周刊 Vol.36: 你好 Hooks，再见 2020

    蒲公英 · JELLY技术周刊 Vol.36 不知不觉,蒲公英已经伴随我们走过了一年时光,在这一年我们从基础技术.前端框架.图形编程.人工智能等诸多领域为大家推介了三百余篇文章,尽管这一年来风雨不断, ...

  6. 为什么spring 被@Repository注解标识注入后是代理类

    背景 今天发现一个奇怪的问题,有一个类是用的@Repository注解标识注入的,并且这个类并没有配置任何带代理和aop配置.但是得到的这个类不是一个原生类,而是一个代理类,如果换成了Componen ...

  7. maven版本仲裁原则

    这里有一个案例是项目里依赖了b组件,b组件依赖了a组件1.0.2版本,而用户也直接在pom依赖了a组件并声明的1.0.0版本,结果在仲裁时选择了1.0.0版本的a组件: +- com.xxx:a:ja ...

  8. Sql语句模糊查询字符串的两种写法

    Sql语句模糊查询有两种写法,一种是在jdbcTemplate的查询方法参数里拼接字符串%,一种是在Sql语句里拼接%字符串. public class IsNameDaoImpl implement ...

  9. 解决MySQL Workbench导出低版本MySQL时报错Unknown table ‘column_statistics’ in information_schema的问题

    在使用高版本MySQL Workbench或MySQL 8.0+版本提供的mysqldump.exe(实际高版本的MySQL Workbench使用的也是高版本的mysqldump.exe)来导出低于 ...

  10. apply 和 call的用法、区别

    1.JavaScript中函数是对象的方法,如果一个函数不是js对象的方法那一定是全局对象的函数,每个函数的对象都有apply和call方法,即每个对象都有call and apply apply:调 ...