Vue+jszip+file-saver|Vue+jszip+file-saver 实现el-table中qrcode生成的二维码图片批量打包成zip下载 Vue+jszip+file-saver实现el-table中

1.template

利用el-table创建一个表格，其中表格的第三列为二维码组件qrcode-vue

基本效果是这样的

Vue+jszip+file-saver|Vue+jszip+file-saver 实现el-table中qrcode生成的二维码图片批量打包成zip下载

文章图片
template.png 2.script

import QrcodeVue from "qrcode.vue"; import FileSaver from 'file-saver' import JSZip from 'jszip' //下载二维码 downloadPicture(){ const zip = new JSZip() const cache = {} let myCanvas = document.getElementById('picture').getElementsByTagName('canvas'); for (let index = 0; index < myCanvas.length; index++) { let data = https://www.it610.com/article/myCanvas[index].toDataURL("image/png"); let fileName = this.tableData[index].linkUrl; zip.file(fileName+'.png',data.substring(22),{base64:true}) cache[fileName] = data } zip.generateAsync({type:"blob"}).then(content => { // 生成二进制流 FileSaver.saveAs(content, "二维码.zip") // 利用file-saver保存文件 })}

【Vue+jszip+file-saver|Vue+jszip+file-saver 实现el-table中qrcode生成的二维码图片批量打包成zip下载】关键是利用DOM，获取里面的元素，可以看到我定义的table id为picture
let myCanvas = document.getElementById('picture').getElementsByTagName('canvas');
这样获取到的myCanvas就是一个collection,就可以通过for循环得到里面的每个元素
这样下载就是把列表中的所有图片下载了，纯前端操作，就不用从服务器下载了。