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 相关文章推荐
js 验证密码强弱的小例子
Mar 21 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
Aug 05 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
Jun 16 Javascript
js实现正方形颜色从下往上升的效果
Aug 04 Javascript
JavaScript中判断两个字符串是否相等的方法
Jul 07 Javascript
分享vue.js devtools遇到一系列问题
Oct 24 Javascript
Vue+webpack项目基础配置教程
Feb 12 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
Aug 07 Javascript
vue二级菜单导航点击选中事件的方法
Sep 12 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
Apr 02 Javascript
解决VUE双向绑定失效的问题
Oct 29 Javascript
基于javascript的无缝滚动动画实现2
Aug 07 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
新的一年,新的期待:DC在2020年的四部动画电影
2020/01/01 欧美动漫
PHP Stream_*系列函数
2010/08/01 PHP
php 带逗号千位符数字的处理方法
2012/01/10 PHP
php静态文件生成类实例分析
2015/01/03 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
禁止F5等快捷键的JS代码
2007/03/06 Javascript
js 表单验证方法(实用)
2009/04/28 Javascript
JavaScript利用正则表达式去除日期中的-
2014/06/09 Javascript
jQuery获取节点和子节点文本的方法
2014/07/22 Javascript
jQuery实现鼠标划过修改样式的方法
2015/04/14 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
2015/09/21 Javascript
详解JavaScript UTC时间转换方法
2016/01/07 Javascript
vue自定义指令directive实例详解
2018/01/17 Javascript
在vue项目中集成graphql(vue-ApolloClient)
2018/09/08 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
2018/11/02 Javascript
详解vue中axios的使用与封装
2019/03/20 Javascript
JavaScript多种图形实现代码实例
2020/06/28 Javascript
Vue使用Proxy代理后仍无法生效的解决
2020/11/13 Javascript
浅谈JSON5解决了JSON的两大痛点
2020/12/14 Javascript
[07:54]DOTA2 MV《我的动力鞋》 ImbaTV 出品
2014/11/21 DOTA
python发送arp欺骗攻击代码分析
2014/01/16 Python
使用python调用浏览器并打开一个网址的例子
2014/06/05 Python
python3实现全角和半角字符转换的方法示例
2017/09/21 Python
Python中分支语句与循环语句实例详解
2018/09/13 Python
python中import与from方法总结(推荐)
2019/03/21 Python
浅谈python之高阶函数和匿名函数
2019/03/21 Python
python程序快速缩进多行代码方法总结
2019/06/23 Python
python调用支付宝支付接口流程
2019/08/15 Python
Python一行代码解决矩阵旋转的问题
2019/11/30 Python
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
2018/01/08 HTML / CSS
创业计划书中包含的9个方面
2013/12/26 职场文书
十月份红领巾广播稿
2014/01/22 职场文书
关于青春的演讲稿三分钟
2014/08/22 职场文书
公安纪律作风整顿剖析材料
2014/10/10 职场文书
Python一些基本的图像操作和处理总结
2021/06/23 Python
海贼王十大潜力果实,路飞仅排第十,第一可毁世界(震震果实)
2022/03/18 日漫