第一步：先下载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. LightningChart解决方案：XY和3D图表（Polymer Char GPC-IR&#174;-工程案例）

    LightningChart解决方案:XY和3D图表(Polymer Char GPC-IR-工程案例) 所在行业:石化公司成立时间:1992年LightningChart解决方案:XY和3D图表 P ...

  2. （一）NumPy基础：数组和矢量计算

    一.创建ndarray 1.各种创建函数的使用 import numpy as np #创建ndarray #1.array方法 data1 = [[6, 7.5, 8, 0, 1], [2, 8, ...

  3. 设计模式之-Builder模式

    场景引入: 一个类,如果有多个属性时,在创建对象,如何对属性进行赋值呢? 1.通过构造器赋值,这种方案优点时一次性赋值完成,但是多种属性的组合,导致构造器会非常多. 2.通过setter方法赋值,方案 ...

  4. 使用IDE练习插件【廖雪峰】

    使用廖雪峰大神的插件,安装过程中,一直出现问题,然后在他的Java教程下面看大家的评论也有点晕了(很多人说的是jar包,结果其实是下的依旧是zip包) 最终解决方法: 将zip包解压到同名文件夹中,再 ...

  5. ROS开源小车TurtleBot3详情介绍

    您为什么要选择ROS开源智能小车 ROS(Robot Operating System,机器人操作系统)是目前世界上更主流更多人使用的的机器人开源操作系统.它可以提供操作系统应有的服务,包括硬件抽象, ...

  6. Android——spinner控件实现读取xml资源，省、市两级互动

    (1)首先在res文件夹下面的values中创建一个省市arrays.xml文件夹,如下 <?xml version="1.0" encoding="utf-8&q ...

  7. DRF之访问权限控制和访问频率控制（节流）

    权限控制 前言 用户验证用户权限,根据不同访问权限控制对不同内容的访问. 建议了解视图.token验证的内容. 使用流程 自定义访问权限类,继承BasePermission,重写has_permiss ...

  8. 初识分布式图数据库 Nebula Graph 2.0 Query Engine

    摘要:本文主要介绍 Query 层的整体结构,并通过一条 nGQL 语句来介绍其通过 Query 层的四个主要模块的流程. 一.概述 分布式图数据库 Nebula Graph 2.0 版本相比 1.0 ...

  9. MMDetection 快速开始，训练自定义数据集

    本文将快速引导使用 MMDetection ,记录了实践中需注意的一些问题. 环境准备 基础环境 Nvidia 显卡的主机 Ubuntu 18.04 系统安装,可见 制作 USB 启动盘,及系统安装 ...

  10. Docker-MsSqlServer和安装版本异同

    创建SqlServer容器 docker run -e "ACCEPT_EULA=Y" -e "SA_PASSWORD=<YourStrong@Passw0rd&g ...