vue中PDF文件转图片方法

所需工具

1、pdfjs-dist（负责API解析，可将pdf文件渲染成canvas实现预览）

2、pdfjsWorker（负责核心解析）

网址奉上：pdf网址

工具下载

npm install --save pdfjs-dist

代码实现

<template><div style="width: 100%;margin: auto;display: flex;flex-direction: column;align-items: center;"><div style="font-size: 30px;">pdf转图片</div><div style="width: 800px;margin-top: 20px;"><div>选择pdf:<input type="file" ref="hiddenfile" accept="application/pdf" @change="handlePdf" class="hiddenInput" /></div></div><div v-for="(item, i) in imgFiles" :key="i" style="width:800px;position: relative;margin-top:10px;"><canvas :id="`pdf_canvas_${item}`" style="border: 1px solid #eeeeee;float:left;"></canvas></div></div>
</template><script>import * as pdfjs from 'pdfjs-dist'
import * as pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'
pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorkerexport default {data() {return {imgFiles: [],pdfName: '',}},methods: {// 处理pdfhandlePdf(evt) {let that = this;let file = evt.target.files[0];this.pdfName = file.name.substring(0, file.name.lastIndexOf("."));var reader = new FileReader();reader.readAsDataURL(file); //将文件读取为 DataURLreader.onload = function () { //文件读取成功完成时触发const loadingTask = pdfjs.getDocument(reader.result)loadingTask.promise.then((pdf) => {var pageNum = pdf.numPages;console.log("页数:" + pageNum);//准备图片for (let i = 1; i <= pageNum; i++) {let one = i;that.imgFiles.push(one);}//处理for (let i = 1; i <= pageNum; i++) {pdf.getPage(i).then((page) => {const canvas = document.getElementById('pdf_canvas_' + i);const ctx = canvas.getContext('2d')const viewport = page.getViewport({ scale: 4 })canvas.height = viewport.height;canvas.width = viewport.width;const destWidth = 398;canvas.style.width = destWidth + 'px';canvas.style.height = destWidth * (viewport.height / viewport.width) + 'px';page.render({canvasContext: ctx,viewport,})})}})}},}
}
</script>
<style>
* {margin: 0;padding: 0;
}
</style>

看效果

说一下我一开始安装遇到的巨坑的地方，我用npm安装这个最新的2.16.105这个版本的pdfjs-dist这个包的时候出现了一个bug

看到这里的是不是觉得很奇怪，报了个这个错，这个包里面的pdf.js里面的方法都带有#，这个class类里面的这个方法前加个#没看懂，有懂这个的可以留言告诉我一下，谢谢

最后是到官网去这里安装了2.2.228这个版本后才没问题的
安装指定版本npm install --save pdfjs-dist@2.2.228

vue中PDF文件转图片方法相关推荐

前端PDF文件转图片方法（你值得收藏）
前端PDF文件转图片方法(你值得收藏) 第一步:先下载pdfjs,网址:PDF下载地址,再引入到项目中,我是标签直接引用的 <script src="pdfjs/build/pdf.j ...
SAP中PDF文件本地保存方法
1.对于scriptform或者smartform已经ABAP list都可以通过SAP标准程序RSTXPDFT4进行本地保存. 使用本方法需要获得要打印内容的假脱机请求号,可以通过事务码SP02获得 ...
python中读取文件内容-深入学习python解析并读取PDF文件内容的方法
这篇文章主要学习了python解析并读取PDF文件内容的方法,包括对学习库的应用,python2.7和python3.6中python解析PDF文件内容库的更新,包括对pdfminer库的详细解释和应 ...
pdf转图片 java_有将pdf文件转图片的格式方法吗？
有时候我们为了方便传输,需要把图片转为PDF的格式,因为它所占的空间相对要小.但是因为pdf文件的安全性很好所以不能进行编辑,那我们又要进行编辑图片的时候,就又会把PDF文件格式转换成图片来进行编辑. ...
如何将PDF文件或图片或网页中的公式变为可编辑的--mathpix快速输入公式
说在前面: PDF文件或图片或网页中的公式,有自己写文章或者做PPT需要的,如果公式很复杂,或者你就是懒.若是用latex写文章,就想直接把公式变为可编辑的latex格式,是用word写文章或者做PP ...
上传pdf文件转图片翻页小工具，遇到JSP form中type=file的文件上传及后台Part处理问题(后台取值为null)
最近公司要求做一个上传pdf文件后将文件转换为翻页图片的小工具,我是这么做的 1.先找图片翻页的demo,微软有现有的产品turn.js感兴趣的可以自己看一下 ,有双页的有单页的,因为我司要求手机端使 ...
PDF文件转图片怎么弄？这个方法值得收藏
PDF文件是一种广泛使用的文件格式,其保留了原始文档的格式和内容,使其在不同平台上具有高度的兼容性.然而,在某些情况下,我们需要将PDF文件转换为图片格式以便于处理和分享.本文将介绍两种方法将PDF文 ...
Vue中实现文件流格式图片预览
需求:后端接口返回文档流格式图片,如何在页面中显示显示并预览? 思路: 设置 axios responseType: 'blob':传送门:JavaScript Blob 对象详解 URL.creat ...
PHP中使用mpdf 导出PDF文件的实现方法
mPDF是一个很强大的PDF生成库,能基本兼容HTML标签和CSS3样式,这篇文章通过实例代码给大家介绍PHP中使用mpdf 导出PDF文件的实现方法. 具体代码如下所示: ? 1 2 3 4 5 6 ...

vue中PDF文件转图片方法

所需工具

工具下载

代码实现

看效果

vue中PDF文件转图片方法相关推荐

最新文章

热门文章