js 实现多个文件循环下载批量下载-Toy模板网

这篇具有很好参考价值的文章主要介绍了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();
};