base64 能放数组里面么_手把手教你Vue解析pdf(base64)转图片【实践】
作者:yeyan1996
转发链接:https://juejin.im/post/5bc97ab6e51d450e5d0b7dcb
公司有个业务需求,要求后台传pdf的base64编码给前端,前端显示到界面上,后来在网上搜索了很多关于base64转pdf的文章,都写的不是非常的详细,在实现的过程中遇到很多坑,经过一天的研究终于实现了这个功能,分享一下我在这个功能中遇到的问题和解决方法
要注明的是这里用到的核心插件是pdf.js,原理是动态生成canvas标签,然后通过pdf.js生成一个能渲染出pdf的对象,随后渲染每个canvas,并且生成的pdf是画面的形式,并没有pdf之类的控件
引入插件
这里很多博客都是使用JavaScript原生的方法引入pdf.js,例如使用script标签引入外部的js脚本,或者直接把pdf.js的源码复制到项目中,但是我尝试这些方法的时候都不是特别好用,而且引入后导致项目体积过于庞大,
随后我去github上寻找通过包管理器引入pdf.js的方法,在pdf.js的github上官方说明的是用gulp如何使用pdf.js,但是对于npm来说并没有详细说明,终于我在字里行间发现了这么一句话
github: https://github.com/mozilla/pdf.js
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
可以看到fileName是pdf的名字,fileVale是pdf文件的base64编码,thumbnail是pdf缩略图的base64编码这里用不到先不管,之前说到需要动态生成canvas节点(这里不会canvas也不要紧,只需要根据代码一步步做就能渲染canvas)
- 首先我们创建一个承载所有canvas节点的父节点,取名为pdfList
- 然后创建一个异步函数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对象,这个对象有几个属性,可以打印出来观察一下
这里我们先用到的是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会给每个组件里面的样式添加这个自定义属性,Vue框架这样做可以防止样式的相互污染(也就是style旁边的scoped属性)
我们这里可以在这个style下面再创建一个style写入样式来达到修改canvas样式的效果,但是记得这样做你整个项目里面类名叫canvas的都会获得这个样式,需要注意
写在最后
这里使用的是动态生成canvas节点然后渲染这个节点生成的图片,然而直接使用createElement生成一个节点并且频繁操作DOM会对性能有一定的影响,如果有更好的方法欢迎留言交流,感谢观看
后记
在之前的代码中,我们遍历生成pdf对象的每一页,之后动态生成canvas节点,而这样做会让浏览器反复渲染新信息,可以使用documentFragment来优化canvas节点的渲染
语法: let fragment = document.createDocumentFragment();
documentFragment会创建一个空的文档片段,它类似一个'仓库',可以暂时储存我们生成的节点,然后一次性添加到父节点中,这样减少了渲染次数可以一定程度上提高性能,我们修改一下之前的代码,添加documentFragment
async showPdf() { let pdfList = document.querySelector('.pdfList') let fragment = document.createDocumentFragment() //生成一个空的documentFragment文档片段 //创建documentFragment储存canvas节点一次性渲染//通过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 fragment.appendChild(canvas) //添加canvas节点到fragment文档片段中 } pdfList.appendChild(fragment) //将fragment插入到pdfList节点的最后 } }
作者:yeyan1996
转发链接:https://juejin.im/post/5bc97ab6e51d450e5d0b7dcb
base64 能放数组里面么_手把手教你Vue解析pdf(base64)转图片【实践】相关推荐
- base64 能放数组里面么_数组:总结篇
我们做个总结吧 数组理论基础 数组是非常基础的数据结构,在面试中,考察数组的题目一般在思维上都不难,主要是考察对代码的掌控能力 也就是说,想法很简单,但实现起来 可能就不是那么回事了. 首先要知道数组 ...
- Adobe Reader 文档无法签名_手把手教你如何利用PDF阅读器压缩PDF文档
众所周知,PDF格式文本.格式.字体.颜色.分辨率.链接及图形图像.声音.动态影像等所有的信息封装在一个特殊的整合文件中.这个优点也导致我们工作学习上接触到的PDF文档体积都不小,非常影响阅读体验和邮 ...
- 软件_手把手教vscode配置c++,python开发环境
原创:软件_手把手教vscode配置c++,python开发环境 之前主用Python作为项目开发语言,将项目迁移到arm边缘盒子上后发现arm的cpu不给力,软件速度低于预期,所以计划将部分程序改为 ...
- css布局方式_手把手教你CSS Flex布局「真香」
作者:EcbJS 转发链接:https://blog.csdn.net/EcbJS/article/details/106466757 前言 之前做项目,关于布局方面没怎么深入研究过,好多页面都是 ...
- 永磁同步电机驱动视频教程_矢量控制_手把手教你写代码_无感FOC_有感FOC_状态观测器_卡尔曼滤波_慧驱动
手把手教你驱动永磁同步电机_视频教程 前言 大家在刚开始搞永磁同步电机控制的时候,大部分都是先接触的芯片厂商提供的方案,然后查资料,买芯片厂商的电机套件,买回来后,通电启动,电机顺利的转起来了,然后再 ...
- 怎么用python自制计算公式_手把手教你用python制作简易计算器,能够记录你使用的情况...
话不多说,首先先看效果图,它能够记录你在使用过程中的历史,方便你查看是否有错: 接下来就仔细分析一下是如何制作的: 简易计算器 第一步:导入资源库 在过程中使用到了tkinter这个资源库,win+R ...
- centos7 nginx安装_手把手教你PHP(一) Centos7上的LEMP配置
相信有些刚刚接触web开发的小伙伴对于服务器上搭建web环境还不太了解,今天手把手教大家搭建lemp的线上环境,您需要做如下一些准备: 阿里云或者其他服务商的云主机一台 云主机已安装Centos 7 ...
- python 词云手把手_手把手教你生成炫酷的词云
前言: 话说,在这个大数据时代,获取信息显得极为容易,可正是如此,我们想要对信息进行直观地了解难度就大了.Excel是一个很好的数据可视化方法,不过有时候我们的数据来源可能并不是一张或者多张Excel ...
- python k线合成_手把手教你写一个Python版的K线合成函数
手把手教你写一个Python版的K线合成函数 在编写.使用策略时,经常会使用一些不常用的K线周期数据.然而交易所.数据源又没有提供这些周期的数据.只能通过使用已有周期的数据进行合成.合成算法已经有一个 ...
最新文章
- R语言dataframe合并函数merge实战
- 建造者模式(Builder)
- 华为光模块,华为光纤模块,华为单模光模块,华为多模光模块,华为千兆光模块
- python竞赛试题及答案_竞赛信息 | 蓝桥杯大赛Python组
- elf 取路径_c – 获取主要可执行文件的ELF标题
- PyRun_SimpleFile()崩溃问题
- Struts2源码阅读(六)_ActionProxyActionInvocation
- 可以发外链的网站_可以发外链的地方有哪些?-top推
- 对象不支持属性或方法dbzz.html,JavaScript 中 setTimeout()的用法 ZZ
- embedding.assign(embedding_input)的解读
- HDU1996 汉诺塔VI【水题】
- mac怎么装java eclipse_如何在Mac系统安装eclipse并运行java程序
- 三维地震数据segy数据显示
- java控制分屏_java实现arcgis地图分屏(双图)
- electron 主进程与渲染进程通讯
- Python爬虫实战:手把手教你 字体反爬 CSS反爬练习 猿人学比赛题目四题详解
- 达内学员就业率远超名校大学生就业率
- Python在金融,数据分析,和人工智能中的应用
- Web 前端学习 之servlet技术(一)
- 最新成果展示:Ga2O3-SBD计算模型
热门文章
- Flask 框架 是 Python 中最流行的 Web 框架之一
- 2016年最值得学习的五大开源项目
- 12个强大的Web服务测试工具
- python打包成exe fail to ex_寻求帮助:pyinstaller打包.exe
- 泰康应用盒子Android,泰康医疗app下载-泰康医疗 安卓版v1.8.8-PC6安卓网
- redis技术分享ppt_一线互联网架构师技术分享:基于redis的分布式锁实现
- 理发师问题报告java_操作系统-理发师问题的java模拟
- 在马来西亚做it总监_IT行业40岁以上的人都去哪儿了?
- py获取前端的参数_Python小工具系列(3)之参数检查
- php如何定义和使用常量,PHP中如何定义和使用常量_PHP教程