下载并打包多个文件

描述：

后端返回文件（一个至多个）访问地址，下载并压缩文件，且同一个分类的文件为一个文件夹，最终下载的压缩包里包含一个至多个文件夹，文件夹里包含一个至多个文件

主要代码：

/** 该项目中接口返回文件资料列表格式--主要取出文件夹名称、文件名称、文件访问地址
    list:[{
        id: '',
        projectName: '',
        expands: {
            wjlb1: [{
                id: '',
                downloadUrl: ''
            },{
                id: '',
                downloadUrl: ''
            }],
            wjlb2: [{
                id: '',
                downloadUrl: ''
            },{
                id: '',
                downloadUrl: ''
            }]
        }
    }]
**/
setZip(list) {
    this.percentage = 0
    let zip = new JSZip()
    list.forEach(proj => {
        let folderName = proj.projectName + '_' + proj.id   // 文件夹名称
        for(let i in proj.expands) {
            proj.expands[i].forEach(item => {
                let url = item.downloadUrl //  文件访问地址
                zip.folder(folderName).file(item.fileName, this.urlToPromise(url), { binary: true }) // 文件打包
            })
        }
    })
    let that = this
    zip.generateAsync({type: 'blob'}, function updateCallback(metadata) {
        // 下载进度--可写一个进度条展示下载进度
        that.percentage = parseInt(metadata.percent.toFixed(2))
    }).then(function(blob) {
        saveAs(blob, 'XX项目批量下载.zip')  // 文件下载
        that.$message.success('打包完成，已发起下载')
    }, function(err) {
        that.$message.error(err)
    })
},
// 根据文件访问地址读取文件
urlToPromise(url) {
    return new Promise(function(resolve, reject) {
        JSZipUtils.getBinaryContent(url, function(err, data) {
            if (err) {
                reject(err)
            } else {
                resolve(data)
            }
        })
    })
}

主要知识点：

JSZIP、file-saver

参考文章：

JSZip 的简单介绍

JSZip 简单使用

前端如何实现文件下载功能-多方案汇总