前端实现批量导出图片并打包压缩功能

需求

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

实现难点

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

思路分析

1.先将选中二维码的地址存在一个数组中
2.依次请求图片并将其下载
3.后用jszip压缩文件
4.最后用file-saver生成文件

实现

实现的代码如下

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

参考文档

file-saver地址
JSZip参考文档地址