使用jszip和file-saver打包成压缩包下载

生成二维码图片，查看该文章：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')
                  })
                }
              })
            })
          })

具体例子