最近再公司项目中，遇到对文件流导出的操作，一番资料收集及实践后，最终实现了单文件流的单个导出及批量压缩，分享出来，希望能对需要的朋友提供思路。话不多说，以下是步骤：
1. 依赖安装
npm install jszip
npm install axios
npm install file-saver
2.导入依赖
import axios from 'axios'
import JSZip from 'jszip'
const zip = new JSZip()
import { saveAs } from 'file-saver'
3.在data中创建文件夹
data(){
return {
checks: [] //选中导出的项
folders：zip.folder('images') //文件夹命名看自己喜欢
}
}
4.选中导出对象
handleSelectionChange(row) {
this.checks = row
},
5.这次后端提供的接口一次只能返回一个流文件，所以，在处理批量压缩的情况上还得取巧
（1）下载方法：
/**
* 下载
* @param {Object} row
* @param {Boolean} isBatch 是否批量下载 true:是 false:否
*/
download(row, isBatch) {
axios({
method: 'POST',
url: `后端提供的接口`,
data: {
id: row.id
},
headers: {
Authorization: `bearer ${token}`
},
responseType: 'arraybuffer'
})
.then((response) => {
const arrayBufferView = new Uint8Array(response.data)
const blob = new Blob([arrayBufferView], { type: 'image/jpeg' })
if (!isBatch) {
saveAs(blob, `文件${row.sourceCode}`)
} else {
// 将文件流添加到文件夹中
this.folders.file(`压缩包${row.sourceCode}.jpg`, blob, { base64: true })
// 每添加一个文件记录+1
this.currentNum += 1
// 当执行完选中数量的文件后执行打包操作
if (this.currentNum === this.checks.length) {
zip.generateAsync({ type: 'blob' })
.then(content => {
saveAs(content, ` 压缩包${this._RndNum()}`)
})
// 记录归零
this.currentNum = 0
// 打包结束后清空文件夹中的文件
Object.keys(this.folders.files).forEach((key, index) => {
if (index > 0) {
delete this.folders.files[key]
}
})
}
}
})
.catch(err => {
console.log(err)
})
},
//生成12位随机数
_RndNum(n = 12) {
var rnd = ''
for (var i = 0; i < n; i++) {
rnd += Math.floor(Math.random() * 10)
}
return rnd
}
（2）如果是单文件导出，只需要调用：
download(row,false)
（3）如果是批量导出及压缩，则调用：
exportFileAll() {
this.checks.map(el => {
this.download(el, true)
})
}
