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会对性能有一定的影响,如果有更好的方法欢迎留言交流,感谢观看。希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: