本文章主要记录利用jszip实现文件批量下载图片，文档。mp3，视频（MP4)等文件，一般而言前端实现下载功能一般都是通过a链，这在下载单个文件的场景很实用，但如果是批量下载很多个文件，同样也可以用a链接实现但是当文件很多的时候浏览器下方会一下子弹出很多个单个文件，这个对于用户交互是不友好的，如下图所示（当然如果用户不吐槽，这种方式对于开发而言，是最简单快速的）:

总结批量下载的一般实现方案：

1.借助后端，让后端大佬接口直接返回一个已经打包好的zip静态资源链接，前端获取链接直接下载；

2.利用如下所说的a链接方式，遍历列表，然后a链接下载；

3.利用jszip把所有文件下载到一个zip文件下载下来；

 由于后端大佬没时间，所以就尝试在前端打包，实现过程如下：

1.先引入相关的npm包

npm i --save axios jszip file-saver

2. 核心代码如下：

  // 请求文件资源
  const getFile = useCallback((url: string) => {
    return new Promise((resolve, reject) => {
      axios({
        method: 'get',
        url,
        responseType: 'blob',
      }).then((data) => {
          resolve(data.data);
        }).catch((error) => {
          reject(error.toString());
        });

    });
  }, []);

  // 批量下载
  const patchDownload = useCallback(async () => {
    const zip = new JSZip();
    const imgsss: JSZip | null = zip.folder('批量下载');
    const promises: Promise<T>[] = [];
    data.forEach((item) => {
      const promise = getFile(item.download_url).then((data: any) => {
        // 下载文件, 文件名必须带有文件类型后缀
        const file_name = `${item.name}.${item.file_format}`;
        // 逐个添加文件
        imgsss?.file(file_name, data, { binary: true }); 

      });
      promises.push(promise);
    });
    Promise.all(promises).then(() => {
      zip.generateAsync({ type: 'blob' }).then((content) => {
        // 生成二进制流,利用file-saver保存文件
        FileSaver.saveAs(content, '批量下载.zip');
      }).catch(()=>{
        // 如果有资源文件下载失败，就直接用a链接下载
        dataSource.forEach((item) => {
          File.download({ url: item.download_url, fileName: item.name });
        });
      });

    });
  }, [data, getFile]);