前端将下载的文件压缩为zip文件

本来的话这个前端下载文件是要从后端的接口获取二进制流数据 再进行操作的 但是懒得自己写接口返回二进制流数据 就用了比较偷懒的方法来模拟这个二进制流数据 直接用原生的input就可以 类型选择为file
然后点击这个input 就可以拿到files文件了如下图
如果是做文件上传的话 这个数组中每个元素的raw 就是需要提交的内容 例如

const formData = new FormData();
formdata.append('file', files[0].raw)

之后 利用这个数组 封装一个数组 每个对象包含这个文件名 和文件具体内容 这个数组就在内存中了
就可以利用这个数组里的文件内容来实现下载zip了

let dataList = []
files.forEach(item => {
	dataList.push({
		name: item.name,
		value: item.raw
	})
})

附上一张生成的数据dataList

要实现这个功能需要安装两个库

npm install jszip
npm install file-saver

现在内存里面有一个数组 dataList 每个元素有一个name和value属性 value是file类型的文件
将file类型的文件转换为blob类型

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

//以下代码我全是放在一个button的点击事件里面的 这样就可以做到点击就下载了一个zip压缩包
const blob = new Blob([dataList[0].value], {type: "image/jpeg"})
//因为我这里测试上传的就是用的jpg类型的文件 所以我用的type是image/jpeg 
//具体需要什么类型 自行查找mime类型
const zip = new jsZip()
zip.file('[dataList[0].name', blob)
zip.generateAsync({
		type: "blob"
	}).then(res => {
		saveAs(res, '压缩包名字自取或者拿后端给的字段.zip')
})

下面是效果图