＜好记性不如烂笔头系列＞vue生成二维码/打包下载

一、生成二维码

1、安装vue-qr
2、引入 import VueQr from ‘vue-qr’

<div ref="boxRef" class="box"><div class="flex"><div class="left">xxxxx</div><div class="right">xxxxxxxx</div></div><VueQr:size="331":logo-margin="5":logo-src="logo":margin="10":text="url"/><div>xxxx</div>
</div>....
components: {VueQr},
....

二、下载上面整块为单张图

1、安装html2canvas
2、引入import html2canvas from ‘html2canvas’

html2canvas(this.$refs.boxRef).then((canvas) => {const link = document.createElement('a')link.href = canvas.toDataURL('image/png')link.download = `${名称}.png`link.click();alert('下载成功')
}).catch((res) => {alert('下载失败')});

三、下载多张并打包

1、下载 jszip、file-saver

import JSZip from 'jszip'
import FileSaver from 'file-saver'onClickDown() {let list = [{name: '文件名1',url: 'xxx' // 生成二维码的url},{name: '文件名2',url: 'xxx'}]const arr = []for (let i = 0; i < list.length; i++) {const { name, url } = list[i]this.url = urlconst res = await html2canvas(this.$refs.boxRef)const url = res.toDataURL('image/png');arr.push({fileName: name,filePath: url})}this.saveFile(arr)
}setBase64ImgtoFile(filePath, filename) {return new Promise((resolve, reject) => {const image = new Image();image.src = filePath;image.onload = () => {const canvas = document.createElement('canvas');canvas.width = image.width;canvas.height = image.height;const context = canvas.getContext('2d');context.drawImage(image, 0, 0);canvas.toBlob((blob) => {const file = new File([blob], `${filename}.png`, {type: 'image/png'});resolve(file);}, 'image/png');};image.onerror = (error) => reject(error);});}saveFile(list) {const zip = new JSZip()const cache = {}const promises = []list.forEach(val => {letbase64ListRes = []base64ListRes = this.setBase64ImgtoFile(val.filePath, val.fileName).then(data => {zip.file(val.fileName + '.png', data, { binary: true }) cache[val.fileName] = data})promises.push(base64ListRes)})Promise.all(promises).then(() => {zip.generateAsync({ type: 'blob' }).then(content => {FileSaver.saveAs(content, '打包下载.zip'); alert('下载成功')})}).catch((res) => {alert('下载失败')})
}