vuejs+JSZip实现批量图片压缩成zip包并下载到本地

1、使用第三方插件JSZip，安装JSZip
　　npm i JSZip 
2、具体实现逻辑
　　①页面引入　　

　　　　import JSZip from 'jszip'

　　②方法　

　　　　batchQrCodeZip(){

　　　　　　let that = this

     　　　　  let zip = new JSZip()

      　　　　 const promises = []

      　　　　 const cache = {}

　　　　　　//批量导出图片，this.selectedItem为数组对象 ，thumbnailUrl为图片访问地址 ，productName为图片名称

      　　　　 for (const item of this.selectedItem) {

        　　　　　　const promise = that.getFile(item.thumbnailUrl).then((data) => {

          　　　　　 　　// 下载文件, 并存成ArrayBuffer对象

          　　　　　　　zip.file(item.productName + '.png', data, { binary: true }) // 逐个添加文件，需要加后缀".png"

          　　　　　　　cache[item.productName] = data

       　　　　　　 })

       　　　　　　 promises.push(promise)

      　　　　}

     　　　　 let zipname = ''

      　　　　zipname = this.dateFormatter('yyyy-MM-dd HH:mm:ss', new Date())

      　　　　Promise.all(promises).then(() => {

          　　　　zip.generateAsync({ type: 'blob' }).then((content) => {

           　　　　　　 // 生成二进制流

            　　　　　　FileSaver.saveAs(content, zipname) // 利用file-saver保存文件  自定义文件名

            　　　　　　that.$message({ type: 'success', message: '导出成功!' })

          　　　　})

        　　　 })

                   .catch((res) => {

                             that.$message.error('导出失败')

                    })

　　　　}，

　　　　getFile(url) {

     　　　　return new Promise((resolve, reject) => {

       　　　　 axios({

          　　　　　　method: 'get',

          　　　　　　url,

          　　　　　　responseType: 'blob',

        　　　　})

          　　　 .then((response) => {

              　　　　resolve(response.data)

          　　　 })

                     .catch((error) => {

                           reject(error.toString())

                      })

               })

          },