前端批量获取文件并打包压缩解决方案

前言

前端文件下载我相信很多小伙伴并不陌生，下载文件的形式也有很多，例如，后端返回一个文件地址，我们把地址放在<a></a>标签里面点击下载；或者是通过后端接口返回文件流，我们再对流进行一系列的操作等等。

单个件下载的解决方法有很多，但是当我们需要批量下载文件的时候，我们该怎么去做呢？

方案

面对这样的需求，我们提出了以下几个方案：

方案一：直接获取后端返回文件地址数组，然后一个一个的去下载。但是这样每次下载一个文件，浏览器会显示比较多的下载任务；

方案二：后端对先对文件进行打包压缩处理，然后前端只需要下载一个压缩文件，但是这样会对服务器性能造成很大的影响；

方案三：还是直接获取后端返回的文件地址数组，一个一个的去下载，然后前端来进行打包压缩的处理。

说实话，当时提到前端来打包压缩时，我心中就和一部分小伙伴一样，前端怎么打包压缩？下面这两个优秀的库就可以很好的解决我们的问题。

这里提一下，下面是以React环境下为例，但是在其他环境的思路和用法其实都是大同小异，都可以以下面的内容为参考。

JSZip和FileSaver.js

本节会简单的介绍一下JSZip和FileSaver.js的API和用法。

安装

npm install jszip file-saver

JSZip

JSZip是一个用于创建、读取和编辑.zip文件的javascript库，并且拥有有友好而简单的API。

一个简单的例子

首先我们来实现一个简单的例子，来感受一下这个十分好用的工具

import React , { useState } from 'react';
import JSZip from 'jszip';
import FileSaver