前端js实现根据文件url批量压缩下载成zip包

86 阅读 0 评论 57 点赞

我是靠谱客的博主执着柜子，这篇文章主要介绍前端js实现根据文件url批量压缩下载成zip包，现在分享给大家，希望可以做个参考。

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>
   )
}