1.template
利用el-table創(chuàng)建一個(gè)表格，其中表格的第三列為二維碼組件qrcode-vue
<el-table v-if="tableData" :data="tableData" border id="picture" style="width: 80%;margin:auto">
<el-table-column prop="originUrl" label="原始鏈接"></el-table-column>
<el-table-column prop="linkUrl" label="微連接"></el-table-column>
<el-table-column prop="linkUrl" label="二維碼" min-width=200px>
<template slot-scope="scope">
<qrcode-vue :value="scope.row.linkUrl" :size="200" level="H"></qrcode-vue>
</template>
</el-table-column>
</el-table>
基本效果是這樣的
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 = 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 => { // 生成二進(jìn)制流
FileSaver.saveAs(content, "二維碼.zip") // 利用file-saver保存文件
})
}
關(guān)鍵是利用DOM岖圈，獲取里面的元素，可以看到我定義的table id為picture
let myCanvas = document.getElementById('picture').getElementsByTagName('canvas');
這樣獲取到的myCanvas就是一個(gè)collection,就可以通過(guò)for循環(huán)得到里面的每個(gè)元素
這樣下載就是把列表中的所有圖片下載了，純前端操作，就不用從服務(wù)器下載了肠鲫。
result.jpg
