vue 批量下载通用方法

自己做项目的时候遇到需要批量下载文件的需求，于是下意识就用了循环url地址数组创建a标签下载的方法，但浏览器有限制，超过10个文件将不能下载，最多下载10个。于是找遍网上文章，终于找到了适用的。在这记录一下，分享给需要的人

首先需要用到两个插件

file-saver 和 jszip

在需要批量下载功能的vue文件中引入

import { saveAs } from 'file-saver'
import JSZip from 'jszip'

我的项目的文件是存放在阿里云oss里 所以我这边是直接就有url地址数据

先声明获取文件的函数

download(href) {
            return new Promise((resolve, reject) => {
                this.$axios({
                    method:'get',
                    url: href,
                    responseType: 'arraybuffer'
                }).then(data => {
                    resolve(data.data)
                }).catch(error => {
                    reject(error.toString())
                })
            })
        }

然后声明下载按钮所绑定的函数

downClick(){
    const zip = new JSZip()
    const cache = {}
    const promises = []
    //companyAttachmentsList是我自己的附件url地址数组 你可以改成你的数组
    companyAttachmentsList.forEach(item => {
//item.downloadLink.split('?')[0] 处理companyAttachmentsList里的url地址 去除？号和后面的字符串
        const promise = this.download(item.downloadLink.split('?')[0]).then(data => { // 下载文件, 并存成ArrayBuffer对象
//item.fileName companyAttachmentsList里的文件名
            zip.file(item.fileName, data, { binary: true }) // 逐个添加文件
            cache[item.fileName] = data //可要可不要 用来打印查检查添加了那些文件
        })
        promises.push(promise) //加到promises队列里
     })
     Promise.all(promises).then(() => { //异步队列全部完成时 执行下面代码
        zip.generateAsync({type:"blob"}).then(content => { // 生成二进制流
            saveAs(content, "打包下载.zip") // 利用file-saver保存文件
        })
     })

}

然后把downClick 绑定到按钮上点击就可以批量下载了 

注意：打包好的zip文件中，会自动去重 zip.file()传入的文件名参数如果相同，不会重复添加。例如如果有10个文件，其中3个重名， 那么zip文件里只有7个文件 ，不会重复打包如果想全部下载，建议文件名传入时加个index下标尾缀  例：原文件名 + '_' + index

以上知识来源 Vue 中批量下载文件并打包的示例代码_vue.js_脚本之家 (jb51.net)