js 实现多个文件循环下载 批量下载

js 实现多个文件循环下载 批量下载

最近业务涉及勾选之后多个word文件下载 开始用的循环方式 怎么试都是下载最后一个文件 后来找到原因是 当循环执行下载的时候，几个下载命令连续执行的时候，浏览器会取消上一个下载，直接下载最后一个文件。所以要加一个定时器，让几个连续的下载请求之间有时间间隔
所以解决思路有了

const downloadFile = (src: string) => {
  const a = document.createElement("a");
  a.setAttribute("download", "111");
  a.href = src
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
};
const exportWord = (typeName: string, fileName: string) => {
  if (selectedRows.value.length === 0) {
    return message.error("至少选择一项");
  }
  selectedRows.value.forEach((item: any, index: number) => {
      //此处src 要用let const 或者闭包处理
    let src: string = `${VITE_TJBB_API}/export?name=${typeName}&type=doc&jzwid=${item.id}`;
    setTimeout(() => {
      downloadFile(src);
    }, 500 * index);
  });
};

还有一种方式是通过iframe实现 不需要加定时器 浏览器会询问是否允许下载多个文件 代码如下

const downloadFile = (src: string) => {
  const iframe = document.createElement("iframe");
  iframe.style.display = "none";
  iframe.src = src;
  document.body.appendChild(iframe);
  setTimeout(() => {
    iframe.remove();
  }, 2 * 60 * 1000);
};

const exportWord = (typeName: string, fileName: string) => {
  if (selectedRows.value.length === 0) {
    return message.error("至少选择一项");
  }
  selectedRows.value.forEach((item: any, index: number) => {
    let src: string = `${VITE_TJBB_API}/export?name=${typeName}&type=doc&jzwid=${item.id}`;
    downloadFile(src);
  });
};

友情提示 对于这种 直接创建a标签形式下载 的 通过a.download 指定名字下载是没有的 你需要 通过请求 获取文件流 转成url才可以在前端指定下载名称 示例如下‘
’

//下载文件 指定文件名字 直接用a标签下载无法指定文件名字
export const downloadFile = (src: any, fileName: string) => {
  if (!src) {
    return message.error("缺少文件路径");
  }
  // if (!fileName) {
  //   return message.error("缺少文件名称");
  // }
  const x = new window.XMLHttpRequest();
  x.open("GET", src, true);
  x.responseType = "blob";
  x.onload = () => {
    const url = window.URL.createObjectURL(x.response);
    const a = document.createElement("a");
    a.href = url;
    a.download = fileName;
    a.click();
  };
  x.send();
};

也可以使用axios 原理一样 但是涉及请求 可能存在跨域 跨域处理可以愉快的自定义文件名字了

完结撒花