需求

管理后台需要批量导出二维码图片

实现难点

选择相应的图片批量导出或直接批量导出并压缩在一个文件夹里

思路分析

1.先将选中二维码的地址存在一个数组中

实现

实现的代码如下

import axios from 'axios'import JSZip from 'jszip'import FileSaver from 'file-saver'getFile = (url) => {      return new Promise((resolve, reject) => {        axios({          method: 'get',          url,          responseType: 'arraybuffer'        }).then(data => {          resolve(data.data)        }).catch(error => {          reject(error.toString())        })      })    };}// 批量下载handleBatchDownload = async(selectImgList) => {      const data = selectImgList;      const zip = new JSZip()      const cache = {}      const promises = []      await data.forEach(item => {          const promise = this.getFile(item).then(data => { // 下载文件, 并存成ArrayBuffer对象          const arr_name = item.split("/");          let file_name = arr_name[arr_name.length - 1] // 获取文件名          // if (file_name.indexOf('.png') == -1) {         //    file_name = file_name + '.png'         // }          zip.file(file_name, data, {            binary: true          }) // 逐个添加文件          cache[file_name] = data        })        promises.push(promise)      })      Promise.all(promises).then(() => {        zip.generateAsync({          type: "blob"        }).then(content => { // 生成二进制流          FileSaver.saveAs(content, "photo.zip") // 利用file-saver保存文件        })      })    };

知识点总结

1.插件file-saver的使用

• a标签download属性下载不了跨域图片直接在浏览器预览，利用file-saver将跨域访问的图片下载
• 可以file-saver下载其他文件，详情可去参考其API
• 如果你需要保存较大的文件，不受 blob 的大小限制或内存限制，可以看一下更高级的 StreamSaver.js

2.插件jszip的使用

• 点击批量下载所有图片都在浏览器下载文件多表现不友好，需将批量下载的图片打包进压缩包里，故引进了JSZip进行打包
• JSZip是一个用于创建，阅读和编辑.zip文件的JavaScript库，具有友好而简单的API,详细用法可以参照其API

备注 ：

1. 注意的是responseType, 如果下载文件是文本类型的(如: .txt, .js之类的),那么用responseType: 'text'也可以, 但是如果下载的文件是图片, 视频之类的, 就得用arraybuffer
2. 如果下载的文件过大, 打包的时间将会很长, 甚至可能会导致浏览器奔溃
3. 还需要注意的一点是请求图片资源时因其是异步请求，需要等所有图片请求完再进行打包这一步，在请求资源时需要await

参考文档