前端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);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'); //转换为base64if (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;}
}
前端PDF文件转图片方法相关推荐
- 前端PDF文件转图片方法(你值得收藏)
前端PDF文件转图片方法(你值得收藏) 第一步:先下载pdfjs,网址:PDF下载地址,再引入到项目中,我是标签直接引用的 <script src="pdfjs/build/pdf.j ...
- vue中PDF文件转图片方法
所需工具 1.pdfjs-dist(负责API解析,可将pdf文件渲染成canvas实现预览) 2.pdfjsWorker(负责核心解析) 网址奉上:pdf网址 工具下载 npm install -- ...
- pdf转图片 java_有将pdf文件转图片的格式方法吗?
有时候我们为了方便传输,需要把图片转为PDF的格式,因为它所占的空间相对要小.但是因为pdf文件的安全性很好所以不能进行编辑,那我们又要进行编辑图片的时候,就又会把PDF文件格式转换成图片来进行编辑. ...
- PDF文件转图片怎么弄?这个方法值得收藏
PDF文件是一种广泛使用的文件格式,其保留了原始文档的格式和内容,使其在不同平台上具有高度的兼容性.然而,在某些情况下,我们需要将PDF文件转换为图片格式以便于处理和分享.本文将介绍两种方法将PDF文 ...
- 上传pdf文件转图片翻页小工具,遇到JSP form中type=file的文件上传及后台Part处理问题(后台取值为null)
最近公司要求做一个上传pdf文件后将文件转换为翻页图片的小工具,我是这么做的 1.先找图片翻页的demo,微软有现有的产品turn.js感兴趣的可以自己看一下 ,有双页的有单页的,因为我司要求手机端使 ...
- java网页保存pdf_JavaScript+Java实现HTML页面转为PDF文件保存的方法
JavaScript+Java实现HTML页面转为PDF文件保存的方法 发布于 2017-02-27 09:58:50 | 160 次阅读 | 评论: 0 | 来源: 网友投递 JavaScript客 ...
- java 网页保存为pdf文件怎么打开方式_js相关:JavaScript+Java实现HTML页面转为PDF文件保存的方法...
js相关:JavaScript+Java实现HTML页面转为PDF文件保存的方法 发布于 2020-8-12| 复制链接 借助iText这个Java库,我们可以将HTML文件保存为图片文件进而转换成P ...
- 移动端实现PDF文件阅读的方法
2019独角兽企业重金招聘Python工程师标准>>> 前言: 我们知道,Android系统本身不具备打开PDF文件的能力,因此在Android 要实现 PDF 阅读功能需要借助于第 ...
- python 读取文件读出来是什么格式-深入学习python解析并读取PDF文件内容的方法...
这篇文章主要学习了python解析并读取PDF文件内容的方法,包括对学习库的应用,python2.7和python3.6中python解析PDF文件内容库的更新,包括对pdfminer库的详细解释和应 ...
- python中读取文件内容-深入学习python解析并读取PDF文件内容的方法
这篇文章主要学习了python解析并读取PDF文件内容的方法,包括对学习库的应用,python2.7和python3.6中python解析PDF文件内容库的更新,包括对pdfminer库的详细解释和应 ...
最新文章
- 案例实作图解Asp.Net MVC教程
- 如何看懂发电机功率圆图
- python_异常处理
- 配置使用EF6.0常见的一些问题及解决方案
- 20应用统计考研复试要点(part40)--概率论与数理统计
- python控制台执行代码字符串_编写Python脚本以使用控制台命令执行
- gdb core 调试(ZZ)
- Scrapy 1.6 中文文档校对活动 | ApacheCN
- 11 个 Git 面试题
- 10-20C#基础---一维、二维数组冒泡排序
- 待续--mysql中key 、primary key 、unique key 与index区别
- python双星号什么运算_Python中的*(星号)和**(双星号)完全详解
- 小数分频器vhdl实现_小数分频VHDL代码
- 白盒测试的几种覆盖方法:语句覆盖、判定覆盖、条件覆盖、判定/条件覆盖、组合覆盖和路径覆盖详解
- html 怎么让他变成圆角,html让图片变圆角
- 安徽财贸职业学院计算机信息管理怎么样,让大家看看安徽财贸职业学院计算机系的汪永涛辅导员如何对待我的...
- 中国协同工作空间管理软件行业市场供需与战略研究报告
- 图像的采样、频谱和分辨率
- 【调剂】山东大学控制科学与工程学院生物医学实验室课题组招收硕士研究生...
- 证件照背景蓝色变其他颜色——用python与OpenCV
热门文章
- Python内置函数一览表
- win10系统引导丢失,无法进入的解决办法
- Axure中级教程:管理后台内容模板(中继器全交互详解)
- 全自动抠图换背景软件下载_抠图换背景app下载-抠图换背景下载v1.1.6 安卓版-西西软件下载...
- HTML5如何实现网页消息通知提醒
- docker搭建LDAP统一用户认证
- android 公式编辑器,公式编辑器
- Ubuntu中的Gif动画录制工具
- SRCNN-pytoch代码讲解
- cass生成曲线要素_使用CASS6_0获取道路平曲线测设元素的解决方案.pdf