前端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'); //转换为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文件转图片方法（你值得收藏）相关推荐

vue中PDF文件转图片方法
所需工具 1.pdfjs-dist(负责API解析,可将pdf文件渲染成canvas实现预览) 2.pdfjsWorker(负责核心解析) 网址奉上:pdf网址工具下载 npm install -- ...
PDF文件转图片怎么弄？这个方法值得收藏
PDF文件是一种广泛使用的文件格式,其保留了原始文档的格式和内容,使其在不同平台上具有高度的兼容性.然而,在某些情况下,我们需要将PDF文件转换为图片格式以便于处理和分享.本文将介绍两种方法将PDF文 ...
pdf转图片 java_有将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库的详细解释和应 ...

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

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

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

最新文章

热门文章