js - - - - - 如何批量下载文件

1. 思路解析

• 方案1: 将所有的需要下载的文件集合到一个数组里，遍历下载
• 方案2: 将所有文件打包下载

2. 方案一：逐个下载

组装数据结构 & 创建标签进行下载

// 组建数据结构
  const downloadFiles = () => {
    
    
      const downloadList = fileList.map((item, index) => {
    
    
        return {
    
    
          name: item.fileName,
          href: "" // 这里组装下载地址
        };
      });
      const triggerDelay = 100;
      const removeDelay = 1000;
      downloadList.forEach((item, index) => {
    
    
        createIFrame(item.href, index * triggerDelay, removeDelay);
      });
    };

// 创建标签进行下载
  const createIFrame = (url, triggerDelay, removeDelay) => {
    
    
      setTimeout(function() {
    
    
        // 动态添加iframe,设置src,然后删除
        const frame = document.createElement("iframe"); //创建标签
        frame.setAttribute("style", "display: none");
        frame.setAttribute("src", url);
        frame.setAttribute("id", "iframeName");
        frame.setAttribute("type", "application/pdf");
        document.body.appendChild(frame);
        setTimeout(function() {
    
    
          document.body.removeChild(frame);
        }, removeDelay);
      }, triggerDelay);
    };

注意：

若单个文件过大，标签加载的时间会相应越长；同时下载文件很多，很可能会因操作而漏掉正在加载的文件！！！

2. 方案二： 打包下载

使用file-saver& jszip插件进行前端打包

或者后端同学配合出一个打包后的文件接口直接下载