第一步:先下载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. phpMyadmin(CVE-2018-12613)后台任意文件包含漏洞分析

    前言 影响版本:4.8.0--4.8.1 本次复现使用4.8.1     点击下载 复现平台为vulhub.此漏洞复现平台如何安装使用不在赘述.请自行百度. 漏洞复现 漏洞环境启动成功. 访问该漏洞地 ...

  2. html2canvas实现浏览器截图的原理(包含源码分析的通用方法)

    DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师. 官方网站:devui.design Ng组件库:ng-devui(欢 ...

  3. Java可视化窗体

    加粗样式>Swing程序表示Java的客户端窗体程序,除了通过手动编写代码的方式设计Swing程序之外,Eclipse中还提供了一种WindowBuilder工具,该工具是一种非常好用的Swin ...

  4. win10新版wsl2使用指南

    本篇文章会介绍win10中wsl2的安装和使用以及遇到的常见问题比如如何固定wsl2地址等问题的总结. 一.wsl2简介 wsl是适用于 Linux 的 Windows 子系统,安装指南:适用于 Li ...

  5. FLUXION参考渗透测试

    1. 安装Fluxion 第一种种在终端输入git clone https://github.com/FluxionNetwork/fluxion.git(官方)第二种: 在终端输入 https:// ...

  6. Core3.0返回的Json数据大小写格式问题

    前言 测试发现,CoreWebAPI返回的Json数据,会将字段的首字母转换为小写, 经百度得,返回数据会默认驼峰命名,导致的. 随即百度, https://www.cnblogs.com/cdone ...

  7. Android自定义ViewGroup-入门

    1.效果 2步骤 自定义ViewGroup的步骤是 1.1测量onMeasure /** * 获取子view的个数 * 逐个测量其宽高 得到整个ViewGroup的宽高 * * @param widt ...

  8. 创建Web Service项目

    使用AXIS框架   idea方式: 创建后 加入axis依赖包到输出目录,idea也会提示你进行这步操作 项目启动后访问 http://localhost:8080/AxisWebService/s ...

  9. LeetCode数组移除数组中目标元素等题目

    一种自己解题,一种高赞解题 /** * 移除数组中目标元素,返回新数组长度 * @param nums * @param val * @return */ public int removeEleme ...

  10. 使用Android Studio来阅读Android源码

    在编译android系统后,执行下面命令来生成索引. mmm development/tools/idegen/mv ./out/target/product/tiny4412/obj/GYP/sha ...