1、安装依赖
npm install jszip --save / yarn add jszip -S
npm install file-saver --save / yarn add file-saver -S
2、引入
import JSZip from 'jszip'
import FileSaver from 'file-saver'
import axios from 'axios';
3、实现
const dataSouce = [
{
fileUrl: 'http://dev.imuyuan.com/file/fetch/v1/7lGQFepQllMVl8ZTbMftS5',
fileName: '文件一'
},
{
fileUrl: 'http://dev.imuyuan.com/file/fetch/v1/5SNVT9QI6g791pHBSjLRsE',
fileName: '文件二'
},
{
fileUrl: 'http://dev.imuyuan.com/file/fetch/v1/4m0Qy7k1qMrh8QIA8DbHce',
fileName: '文件三'
},
{
fileUrl: 'http://dev.imuyuan.com/file/fetch/v1/2GCtdxKkrlVTSHAt00sHXJ',
fileName: '文件四'
},
]
const Index = () => {
// 将文件 url 格式转换为 Bolb 类型格式 或者 arraybuffer 格式
const getFileData = (fileUrl: string) => {
return new Promise((resolve, reject) => {
axios(fileUrl, {
method: 'GET',
responseType: 'blob' // 返回的数据会被强制转为blob类型 ,转换成arraybuffer 也行
}).then((res) => {
console.log('res', res)
resolve(res)
}).catch(error) => {
reject(error)
}
})
}
// 批量打包下载事件
const handleBatchDown = async () => {
const zip = new JSZip() // 创建实例对象
const promises: any = []
dataSource.forEach((item: any) => {
const promise = getFile(item.fileUrl).then((res: any) => {
const fileName = item.fileName + ''
// 创建文件用file(),创建文件夹用 floder()
zip.file(fileName, res, {binary: true})
})
promises.push(promise)
})
/**
Promise.all 方法用于将多个 Promise 实例,包装成一个新的 Promise 实例,
只有当all([p1, p2, p3]) 中的每一个 Promise 实例的状态都变成 fulfilled, Promise.all()的状态才会变成 fulfilled,此时 p1, p2, p3 的返回值组成一个数据,传给 Promise.all()的回调函数
只要 p1, p2, p3 中任何一个被 rejected, Promise.all() 的状态就会变成 rejected,此时第一个被 rejected 的实例的返回值,会传给 Promise.all()的回调函数。
在上面的代码中,promises 数组中的每一个元素,都是 Promise 实例,所以需要用到 Promise.all()
*/
// 生成 zip 文件
Promise.all(promises).then(() => {
// 生成zip 文件
zip.generateAsync({
type: 'blob',
compression: 'DEFLATE', // STORE: 默认不压缩, DEFLATE:需要压缩
compressionOptions: {
level: 9 // 压缩等级 1~9 1 压缩速度最快, 9 最优压缩方式
}
}).then((res: any) => {
FileSaver.saveAs(res, '测试.zip') // 使用FileSaver.saveAs保存文件,文件名可自定义
})
})
}
return (
<div>
<Button onClick = {handleBatchDown}>批量打包下载文件</Button>
</div>
)
}
export default memo(Index)
最后
以上就是执着柜子最近收集整理的关于前端js实现根据文件url批量压缩下载成zip包的全部内容,更多相关前端js实现根据文件url批量压缩下载成zip包内容请搜索靠谱客的其他文章。
发表评论 取消回复