前言
前端文件下载我置信很多小伙伴并不生疏，下载文件的模式也有很多，例如，后端返回一个文件地址，咱们把地址放在<a></a>标签外面点击下载；或者是通过后端接口返回文件流，咱们再对流进行一系列的操作等等。
单个件下载的解决办法有很多，然而当咱们须要批量下载文件的时候，咱们该怎么去做呢？
计划
面对这样的需要，咱们提出了以下几个计划：
计划一：间接获取后端返回文件地址数组，而后一个一个的去下载。然而这样每次下载一个文件，浏览器会显示比拟多的下载工作；
计划二：后端对先对文件进行打包压缩解决，而后前端只须要下载一个压缩文件，然而这样会对服务器性能造成很大的影响；
计划三：还是间接获取后端返回的文件地址数组，一个一个的去下载，而后前端来进行打包压缩的解决。
说实话，过后提到前端来打包压缩时，我心中就和一部分小伙伴一样，前端怎么打包压缩？上面这两个优良的库就能够很好的解决咱们的问题。
这里提一下，上面是以React环境下为例，然而在其余环境的思路和用法其实都是大同小异，都能够以上面的内容为参考。
JSZip和FileSaver.js
本节会简略的介绍一下JSZip和FileSaver.js的API和用法。
装置
npm install jszip file-saverJSZip
JSZip是一个用于创立、读取和编辑.zip文件的javascript库，并且领有有敌对而简略的API。
一个简略的例子
首先咱们来实现一个简略的例子，来感受一下这个非常好用的工具
import React , { useState } from 'react';import JSZip from 'jszip';import FileSaver from 'file-saver'; const MyButton = () => { const downloadFile = () => { const zip = new JSZip(); zip.file("Hello.txt", "Hello World\n"); zip.generateAsync({type:"blob"}) .then((content) => { FileSaver(content, "example.zip"); }); } return ( <div> <button onClick={() => { downloadFile() }}>下载</button> </div> )} export default MyButton点击下载按钮，咱们就能够失去一个名为example.zip的压缩文件，关上压缩文件，外面也会有一个名为Hello.txt的文件.
API
简略介绍一下几个API。
创立JSZip实例：
const zip = new JSZip();创立文件：
zip.file("hello.txt", "Hello World\n");创立文件夹：
zip.folder("file")同时创立文件夹和文件：
zip.file("file/hello.txt", "Hello World\n");// 等同于zip.folder("file").file("hello.txt", "Hello World\n");生成一个压缩文件：
咱们能够通过.generateAsync(options) 或者 .generateNodeStream(options) 来生成一个压缩文件：
let promise = null;if (JSZip.support.uint8array) { promise = zip.generateAsync({type : "uint8array"});} else { promise = zip.generateAsync({type : "string"});}具体API点击官网文档
FileSaver.js
在后面的这个例子中咱们使用了JSZip外还应用了FileSaver.js这个库。FileSaver.js是在客户端保留文件的解决方案，非常适合在客户端生成文件。
在上一节的例子中，咱们就是通过FileSaver.js把咱们生成的.zip文件保留了下来。
语法
FileSaver saveAs(Blob/File/Url, optional DOMString filename, optional Object { autoBom })例子
import FileSaver from 'file-saver';const blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});FileSaver.saveAs(blob, "hello world.txt");更多用法点击官网文档
批量获取文件并打包下载
这两个库咱们曾经有所理解接下来就是实现咱们的需要。这里分两步进行，第一步是获取文件；第二步是打包压缩。
须要操作的源文件地址
这里的文件地址只是一个简略的示例，理论开发的时候视状况而定。
const data = [ { fileUrl: 'https://www.xxx.com/data/data_service/20210429/144b4b1e4e457485c10fed54b8bc8d48.docx', fileName: '文件一' }, { fileUrl: 'https://www.xxx.com/data/data_service/20210429/144b4b1e4e457485c10fed54b8bc8d48.docx', fileName: '文件二' }, { fileUrl: 'https://www.xxx.com/data/data_service/20210429/144b4b1e4e457485c10fed54b8bc8d48.docx', fileName: '文件三' }, { fileUrl: 'https://www.xxx.com/data/data_service/20210429/144b4b1e4e457485c10fed54b8bc8d48.docx', fileName: '文件四' },]; 获取文件
import JSZip from 'jszip';import FileSaver from 'file-saver';import requestFile from './requestFile'; //这里是封装的申请函数，大家用本人封装的或者Axios都行const getFile = (url: string) => { return new Promise((resolve, reject) => { requestFile(url, { method: 'GET', responseType: 'blob' }).then((res:any) => { resolve(res) }).catch((error: any) => { reject(error) }) })}打包压缩下载
这里次要是通过遍历地址数组，而后通过地址从后端获取文件，再进行一个批量压缩打包文件的操作，最初把压缩好的文件保留下来。
/** * 打包压缩下载 * @param data 源文件数组 * @param fileName 压缩文件的名称 */const compressAndDownload = (data: any[], fileName ?: string) => { const zip = new JSZip(); const promises: any[] = []; //用于存储多个promise data.forEach((item: any) => { const promise = getFile(item.fileUrl).then((res: any) => { const fileName = item.fileName zip.file(fileName, res ,{binary: true}); }) promises.push(promise) }) Promise.all(promises).then(() => { zip.generateAsync({ type: "blob", compression: "DEFLATE", // STORE：默认不压缩 DEFLATE：须要压缩 compressionOptions: { level: 9 // 压缩等级1~9 1压缩速度最快，9最优压缩形式 } }).then((res: any) => { FileSaver.saveAs(res, fileName ? fileName : "压缩包.zip") // 利用file-saver保留文件 }) })}export default compressAndDownload;参考
https://stuk.github.io/jszip/
https://github.com/eligrey/Fi...
最初
通过利用JSZip和FileSaver.js，咱们能够对后端的批量文件进行一个整合打包压缩，这样既在肯定水平上缩小了对服务器的压力，在另一方面给人们的感觉就是下载了一个文件，不会一次性弹出很多的下载工作，也在肯定水平上进步了体验。