Vue项目pdf(base64)转图片

公司有个业务需求,要求后台传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来讲并无详细说明,终于我在字里行间发现了这么一句话

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)

1. 首先咱们建立一个承载全部canvas节点的父节点,取名为pdfList

   

2. 而后建立一个异步函数showPdf(不懂什么是异步函数的能够去查一下async/await,这里不用异步函数也可使用promise.then的方法,可是async/await做为异步操做的终极方案最好仍是学习一下)

async showPdf() {
       
    }
复制代码

3. 使用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文件的页数
        }
    }
复制代码

4. 获取当前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节点的最后
        }
    }

复制代码