生成二维码图片，查看该文章：https://www.jianshu.com/p/fb9a3a095d03
生成带文本的二维码，查看该文章：https://www.jianshu.com/p/53c045df77bd
本章主要讲述jszip和file-saver打包成压缩包,原文链接：https://juejin.cn/post/6948791914661412900
安装
安装jszip
npm install jszip
安装jszip
npm install file-saver
引入
import JSZip from 'jszip'
import FileSaver from 'file-saver'
使用
this.$nextTick(() => {
// // 创建一个code文件夹，文件里里创建一个images文件，文件内容为空
this.zip = new JSZip()
this.imgZipList = this.zip.folder('images')
// 获取每个二维码的dom
const canvasBoxList = document.querySelectorAll('.qr-section')
canvasBoxList.forEach((item, index) => {
// 处理生成待编码的二维码图片
html2canvas(item).then(canvas => {
// 获取图片在线地址
const dataURL = canvas.toDataURL('image/jpg')
const that = this
const total = canvasBoxList.length
// ↓第一个参数是单张二维码图片的命名，第二个参数是二维码的base64，这里用replace把URL的前缀截掉仅保留纯base64编码
that.imgZipList.file(
'二维码_' + index + '.png',
dataURL.replace(/^data:image\/(png|jpg);base64,/, ''),
{
base64: true
}
)
if (index === total - 1) {
// 添加完下载
this.zip.generateAsync({ type: 'blob' }).then(function (content) {
// 使用file-saver保存下载zip文件，第二个参数是压缩包命名
FileSaver.saveAs(content, `二维码.zip`)
that.$emit('handleCancel')
})
}
})
})
})
具体例子
