生成二維碼圖片盲泛，查看該文章：http://www.reibang.com/p/fb9a3a095d03
生成帶文本的二維碼行剂，查看該文章：http://www.reibang.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(() => {
// // 創(chuàng)建一個code文件夾，文件里里創(chuàng)建一個images文件，文件內(nèi)容為空
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
// ↓第一個參數(shù)是單張二維碼圖片的命名，第二個參數(shù)是二維碼的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文件椰弊，第二個參數(shù)是壓縮包命名
FileSaver.saveAs(content, `二維碼.zip`)
that.$emit('handleCancel')
})
}
})
})
})
具體例子
