前端实现文件单个下载及批量下载

1.  单个下载

function(url, fileName) {
      let link = document.createElement("a");
      link.style.display = "none";
      link.href = url;

      link.setAttribute("download", `${fileName}`);
      document.body.appendChild(link);
      link.click(); // 执行下载
      window.URL.revokeObjectURL(link.href); // 释放url
      document.body.removeChild(link); // 释放标签
}

注： 设置a标签的download属性需要满足同源策略，不然将无法生效，则直接采用url中的文件名；如果出现跳转页面而非直接下载的情况时，可以约定后端返回不带尾缀，通过download属性设置；如果不需设置文件名也可通过iframe进行操作，详见批量下载。

function(urls) {
      urls && urls.length > 0 && urls.map((url, index) => {
          const path = url;
          const timer1 = setTimeout(
            (function (path) {
              return function () {
                //定义一个看不见的iframe
                const iframe = document.createElement("iframe");
                iframe.style.display = "none"; // 不可见
                iframe.style.height = "0"; // 高度为0
                iframe.src = path; // 下载地址
                document.body.appendChild(iframe); // 必须有，iframe挂在到dom树触发请求
                var timer2 = setTimeout(function () {
                  iframe.remove();
                  clearTimeout(timer2);
                }, 5000); // 这个就根据实际情况定义一下延时删除添加的iframe,建议根据批量下载文件数及文件大小进行设置,不删除也可
                clearTimeout(timer1);
              };
            })(path),
            1000 * index // 分批发起下载请求
          );
        });
}

注：批量下载要注意浏览器支持同时下载的文件数，如果设置删除iframe，需注意延长时间（或不删除iframe），否则会出现轮到该文件下载的时候，对应iframe已被删除。

部分浏览器并行下载资源数：

IE6：2个；

IE7：4个；

IE8+：6个

FireFox，Chrome：6个。