多个文件压缩打包下载

前言

最近在工作中，遇到了需要对全部文件压缩打包下载的需求，今天记录一下学习到的实现方法

1. 下载插件

npm install jszip --save
npm install file-saver --save

2. 使用，页面调用函数

/**
 * 
 * @param {*} idArr 下载的文件数组，数组形式[ { fileId: xxx, fileName: xxxx, ... }], fileId,fileName必传
 * @param {*} idKey fileArr中文件id对应字段名
 * @param {*} nameKey fileArr中文件名对应字段名
 * eg: fileArr: [{testFileId: xxx, testName: xxx}], idKey: 'testFileId', nameKey: 'testName'
 * @param {*} name 下载的zip文件命名，不传显示默认命名
 * 
 */
export function downloadZip(fileArr, idKey, nameKey, name) {
    let idArr = fileArr.map(item => {
        return {
            fileId: item[idKey],
            fileName: item[nameKey]
        }
    })
    const zip = new JSZip()
    const promises = []
    idArr.forEach(item => {
      const promise =  getFile(item.fileId).then(res => {
          // 逐个添加文件
          zip.file(item.fileName, res, { binary: true })
      })
      promises.push(promise)
    })
    // 全部执行完
    Promise.all(promises).then(res => {
        zip.generateAsync({ type: 'blob'}).then(content => {
            let fileName = name ? name + '.zip' : '打包下载.zip'
           // 下载
            fileSaver.saveAs(content, fileName)
        })
    })
}

function getFile(fileId) {
    return new Promise((resolve, reject) => {
        request({
            method: 'get',
            params: {
                fileId,
            },
            url: url, // 文件下载地址
            responseType: 'arraybuffer',
            timeout: 0
        }).then(res => {
            resolve(res.data)
        }).catch((error) => {
            reject(error)
        });
    })  
}