Vue项目pdf(base64)转图片遇到的问题及解决方法


Posted in Javascript onOctober 19, 2018

公司有个业务需求,要求后台传pdf的base64编码给前端,前端显示到界面上,后来在网上搜索了很多关于base64转pdf的文章,都写的不是非常的详细,在实现的过程中遇到很多坑,经过一天的研究终于实现了这个功能,分享一下我在这个功能中遇到的问题和解决方法

要注明的是这里用到的核心插件是pdf.js,原理是动态生成canvas标签,然后通过pdf.js生成一个能渲染出pdf的对象,随后渲染每个canvas,并且生成的pdf是画面的形式,并没有pdf之类的控件

引入插件

这里很多博客都是使用JavaScript原生的方法引入pdf.js,例如使用script标签引入外部的js脚本,或者直接把pdf.js的源码复制到项目中,但是我尝试这些方法的时候都不是特别好用,而且引入后导致项目体积过于庞大,

Vue项目pdf(base64)转图片遇到的问题及解决方法

随后我去github上寻找通过包管理器引入pdf.js的方法,在pdf.js的github上官方说明的是用gulp如何使用pdf.js,但是对于npm来说并没有详细说明,终于我在字里行间发现了这么一句话

To use PDF.js in a web application you can choose to use a pre-built version of the library or to build it from source. We supply pre-built versions for usage with NPM and Bower under the pdfjs-dist name. For more information and examples please refer to the wiki page on this subject.

大致的意思就是如果使用npm包管理器或者bower的话,引入的名字为pdfjs-dist,那么我们使用npm的方法引入这个pdfjs-dist,引入的名字就随意取名了这里我叫PDFJS

import PDFJS from 'pdfjs-dist'

使用pdfjs-dist

这里后台传给我的是一个由pdf文件名字和pdf的base64编码组成的对象的数组,我取名为pdfDataList

Vue项目pdf(base64)转图片遇到的问题及解决方法

可以看到fileName是pdf的名字,fileVale是pdf文件的base64编码,thumbnail是pdf缩略图的base64编码这里用不到先不管,之前说到需要动态生成canvas节点(这里不会canvas也不要紧,只需要根据代码一步步做就能渲染canvas)

1.首先我们创建一个承载所有canvas节点的父节点,取名为pdfList

Vue项目pdf(base64)转图片遇到的问题及解决方法

2.然后创建一个异步函数showPdf(不懂什么是异步函数的可以去查一下async/await,这里不用异步函数也可以使用promise.then的方法,但是async/await作为异步操作的终极方案最好还是学习一下)

async showPdf() {   
  }

使用querySelector选择类名为pdfList的dom节点,随后遍历后台传过来的pdfDataList数组的每一项,这里用到一个浏览器自带的atob()方法解码base64,MDN上是这么解释的:

你可以使用 window.btoa() 方法来编码一个可能在传输过程中出现问题的数据,并且在接受数据之后,使用 atob() 方法再将数据解码。

语法: var decodedData = scope.atob(encodedData);

随后调用pdf.js插件的getDocument方法,getDocument是一个promise,所以使用异步函数的话前面需要加await关键字(不使用异步函数的话在方法后面加.then((pdf)=>{.......}),这个pdf对象和我这个pdf对象是同一个,同时这里暂时也没考虑异步操作出错的情况,有要求的话可以在加个catch捕获错误)

getDocument方法的参数是一个对象,对象键名为data,值为base64解码后的值,此方法返回一个pdf对象,这个对象有几个属性,可以打印出来观察一下

Vue项目pdf(base64)转图片遇到的问题及解决方法

这里我们先用到的是numPages属性,它指的是当前pdf文件有多少页

async showPdf() {
    let pdfList = document.querySelector('.pdfList') //通过querySelector选择DOM节点,使用document.getElementById()也一样
    for(let value of this.pdfDataList){ //遍历后台传过来的pdfDataList
      let base64 = value.fileValue //获得bas464编码
      let decodedBase64 = atob(base64) //使用浏览器自带的方法解码
      let pdf = await PDFJS.getDocument({data: decodedBase64}) //返回一个pdf对象
      let pages = pdf.numPages //声明一个pages变量等于当前pdf文件的页数
    }
  }

获取当前pdf文件的对象和当前pdf文件的所有页数后,循环遍历每个页数,执行如下操作:

1)动态创建canvas节点
2)调用pdf对象原型上的getPage()方法和getViewport()方法,依次传入当前循环的页数和canvas的缩放大小(这里不懂的可以直接复制黏贴)
3)渲染当前的canvas节点
4)调用page对象的render()方法渲染当前页,此方法也是一个promise,需要使用await关键字等到状态为resolve后再执行之后的代码
5)给显示当前页面的canvas节点一个className为canvas方便修改样式,最后把这个canvas节点插入到pdfList节点中

async showPdf() {
    let pdfList = document.querySelector('.pdfList') //通过querySelector选择DOM节点,使用document.getElementById()也一样
    for(let value of this.pdfDataList){ //遍历后台传过来的pdfDataList
      let base64 = value.fileValue //获得bas464编码
      let decodedBase64 = atob(base64) //使用浏览器自带的方法解码
      let pdf = await PDFJS.getDocument({data: decodedBase64}) //返回一个pdf对象
      let pages = pdf.numPages //声明一个pages变量等于当前pdf文件的页数
      for (let i = 1; i <= pages; i++) { //循环页数
       let canvas = document.createElement('canvas') 
       let page = await pdf.getPage(i) //调用getPage方法传入当前循环的页数,返回一个page对象
       let scale = 1;//缩放倍数,1表示原始大小
       let viewport = page.getViewport(scale); 
       let context = canvas.getContext('2d'); //创建绘制canvas的对象
       canvas.height = viewport.height; //定义canvas高和宽
       canvas.width = viewport.width;
       let renderContext = {
        canvasContext: context,
        viewport: viewport
       };
       await page.render(renderContext)

       canvas.className = 'canvas' //给canvas节点定义一个class名,这里我取名为canvas
       pdfList.appendChild(canvas) //插入到pdfList节点的最后
      }
    }
  }

至此页面上就会多出一个canvas节点并且显示当前pdf文件的第一页的图片,如果当前pdf文件有多页就会渲染出多个canvas节点,有多个pdf文件就会先循环外层,然后再循环内层,把每个pdf文件的每一页都生成一个canvas节点

 

修改样式

渲染出页面后还有个要注意的点,Vue框架会给每个组件的DOM节点生成一个自定义属性,而节点动态生成的canvas节点,并没有data-v-xxxxx这样的自定义属性

Vue项目pdf(base64)转图片遇到的问题及解决方法

而Vue会给每个组件里面的样式添加这个自定义属性,Vue框架这样做可以防止样式的相互污染(也就是style旁边的scoped属性)

Vue项目pdf(base64)转图片遇到的问题及解决方法

Vue项目pdf(base64)转图片遇到的问题及解决方法

我们这里可以在这个style下面再创建一个style写入样式来达到修改canvas样式的效果,但是记得这样做你整个项目里面类名叫canvas的都会获得这个样式,需要注意

Vue项目pdf(base64)转图片遇到的问题及解决方法

写在最后

这里使用的是动态生成canvas节点然后渲染这个节点生成的图片,然而直接使用createElement生成一个节点并且频繁操作DOM会对性能有一定的影响,如果有更好的方法欢迎留言交流,感谢观看。希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JSQL  一个 web DB 的封装
May 05 Javascript
javascript变量作用域使用中常见错误总结
Mar 26 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
Nov 26 Javascript
JS实现自动定时切换的简洁网页选项卡效果
Oct 13 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
Feb 01 Javascript
几种经典排序算法的JS实现方法
Mar 25 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
Apr 12 Javascript
原生JS查找元素的方法(推荐)
Nov 22 Javascript
解决Vue编译时写在style中的路径问题
Sep 21 Javascript
vue-property-decorator用法详解
Dec 12 Javascript
JS实现瀑布流效果
Mar 07 Javascript
使用eslint和githooks统一前端风格的技巧
Jul 29 Javascript
使用pkg打包Node.js应用的方法步骤
Oct 19 #Javascript
简化版的vue-router实现思路详解
Oct 19 #Javascript
vue中el-upload上传图片到七牛的示例代码
Oct 19 #Javascript
浅析vue-router原理
Oct 19 #Javascript
vue-cli3.0 脚手架搭建项目的过程详解
Oct 19 #Javascript
vue-quill-editor+plupload富文本编辑器实例详解
Oct 19 #Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
Oct 19 #Javascript
You might like
对squid中refresh_pattern的一些理解和建议
2009/04/17 PHP
基于PHP+Ajax实现表单验证的详解
2013/06/25 PHP
php获取开始与结束日期之间所有日期的方法
2016/11/29 PHP
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
2011/10/22 Javascript
javascript根据时间生成m位随机数最大13位
2014/10/30 Javascript
javascript原型链继承用法实例分析
2015/01/28 Javascript
AngularJS仿苹果滑屏删除控件
2016/01/18 Javascript
使用Javascript监控前端相关数据的代码
2016/10/27 Javascript
bootstrapValidator 重新启用提交按钮的方法
2017/02/20 Javascript
基于vue2.0+vuex的日期选择组件功能实现
2017/03/13 Javascript
vue 的点击事件获取当前点击的元素方法
2018/09/15 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
2020/03/26 Javascript
Python实现定时任务
2017/02/08 Python
python3 破解 geetest(极验)的滑块验证码功能
2018/02/24 Python
Python 爬取携程所有机票的实例代码
2018/06/11 Python
在PYQT5中QscrollArea(滚动条)的使用方法
2019/06/14 Python
python issubclass 和 isinstance函数
2019/07/25 Python
Python3列表List入门知识附实例
2020/02/09 Python
Python处理mysql特殊字符的问题
2020/03/02 Python
Python return语句如何实现结果返回调用
2020/10/15 Python
Pandas的数据过滤实现
2021/01/15 Python
乌克兰电子和家用电器商店:Foxtrot
2019/07/23 全球购物
SK-II神仙水美国官网:SK-II美国
2020/02/25 全球购物
自荐信的基本格式
2014/02/22 职场文书
国际经济与贸易专业求职信
2014/07/10 职场文书
地球物理学专业推荐信
2014/09/08 职场文书
老人节标语大全
2014/10/08 职场文书
银行员工考核评语
2014/12/31 职场文书
企业开业庆典答谢词
2015/01/20 职场文书
乡镇一岗双责责任书
2015/01/29 职场文书
海上钢琴师观后感
2015/06/03 职场文书
公司规章制度范本
2015/08/03 职场文书
《给予树》教学反思
2016/03/03 职场文书
thinkphp 获取控制器及控制器方法
2021/04/16 PHP
python 自动刷新网页的两种方法
2021/04/20 Python
Python如何导出导入所有依赖包详解
2021/06/08 Python