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

npm install jszip --save  /  yarn add jszip -S
npm install file-saver --save  / yarn add file-saver -S
// axios 相信大家安装的都有

import JSZip from 'jszip'
import FileSaver from 'file-saver'
import axios from 'axios';

import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';

import JSZip from 'jszip'
import FileSaver from 'file-saver'
import axios from 'axios';

// 在这里定义一个数据源，格式为 文件url + 文件名，可以根据自己的项目获取
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)

const zip = new JSZip() // 创建实例对象
zip.file(fileName, res, {binary: true})

const zip = new JSZip()
zip.file('test.txt', '哈哈哈哈哈').folder('测试文件夹').file('text2.txt', '我是另一个文件')