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';

// 在這里定義一個(gè)數(shù)據(jù)源，格式為 文件url + 文件名，可以根據(jù)自己的項(xiàng)目獲取
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 格式轉(zhuǎn)換為 Bolb 類型格式 或者 arraybuffer 格式
	const getFileData = (fileUrl: string) => {
		return new Promise((resolve, reject) => {
			axios(fileUrl, {
				method: 'GET',
				responseType: 'blob'  // 返回的數(shù)據(jù)會(huì)被強(qiáng)制轉(zhuǎn)為blob類型 ，轉(zhuǎn)換成arraybuffer 也行
			}).then((res) => {
				console.log('res', res)
				resolve(res)
			}).catch(error) => {
				reject(error)
			}
		})
	}
	
	// 批量打包下載事件
	const handleBatchDown = async () => {
		const zip = new JSZip() // 創(chuàng)建實(shí)例對(duì)象
		const promises: any = []
		dataSource.forEach((item: any) => {
			const promise = getFile(item.fileUrl).then((res: any) => {
				const fileName = item.fileName + ''
				// 創(chuàng)建文件用file()，創(chuàng)建文件夾用 floder()
				zip.file(fileName, res, {binary: true})
			})
			promises.push(promise)
		})
		
		/** 
			Promise.all 方法用于將多個(gè) Promise 實(shí)例，包裝成一個(gè)新的 Promise 實(shí)例,
			只有當(dāng)all([p1, p2, p3]) 中的每一個(gè) Promise 實(shí)例的狀態(tài)都變成 fulfilled, Promise.all()的狀態(tài)才會(huì)變成 fulfilled，此時(shí)  p1, p2, p3 的返回值組成一個(gè)數(shù)據(jù)，傳給 Promise.all()的回調(diào)函數(shù)
			只要 p1, p2, p3 中任何一個(gè)被 rejected,  Promise.all() 的狀態(tài)就會(huì)變成 rejected，此時(shí)第一個(gè)被 rejected 的實(shí)例的返回值，會(huì)傳給 Promise.all()的回調(diào)函數(shù)。
			
			在上面的代碼中，promises 數(shù)組中的每一個(gè)元素，都是 Promise 實(shí)例，所以需要用到 Promise.all()	
		*/
		
		// 生成 zip 文件
		Promise.all(promises).then(() => {
			// 生成zip 文件
			zip.generateAsync({
				type: 'blob',
				compression: 'DEFLATE',  // STORE: 默認(rèn)不壓縮， DEFLATE：需要壓縮
         		compressionOptions: {
           			level: 9          // 壓縮等級(jí) 1~9   1 壓縮速度最快， 9 最優(yōu)壓縮方式
         		}
			}).then((res: any) => {
				FileSaver.saveAs(res, '測試.zip') // 使用FileSaver.saveAs保存文件，文件名可自定義
			})
		})
		
	}
	
	return (
		<div>
			<Button onClick = {handleBatchDown}>批量打包下載文件</Button>
		</div>
	)
}

export default memo(Index)

const zip = new JSZip() // 創(chuàng)建實(shí)例對(duì)象
zip.file(fileName, res, {binary: true})

const zip = new JSZip()
zip.file('test.txt', '哈哈哈哈哈').folder('測試文件夾').file('text2.txt', '我是另一個(gè)文件')