前端批量下载文件（干货）

news2024/11/26 9:32:52

如果可以实现记得点赞分享，谢谢老铁～

1.常见的下载方式

(1) window.open()
(2) 通过标签绑定url
(3) 通过请求后台API接口进行下载

2.推荐方式

（1）如果是下载单个文件的

直接用window.open(url, ‘打开方式’)
这里的打开方式常用的是当前窗口：“self " 或者是重新新开一个窗口：”_blank"。
下载的话通常在当前窗口打开。

（2）如果是批量下载

拼接url利用window.open下载多个文件时，window.open会中断循环。所以不能使用window.open();
但可以使用循环生成iframe方法实现批量下载。

// 可以使用循环生成iframe方法实现批量下载
const iframe = document.createElement("iframe");
iframe.style.display = "none"; // 不可见
iframe.style.height = "0"; // 高度为0
iframe.src = url; // 下载地址
document.body.appendChild(iframe); // 必须有，iframe挂在到dom树触发请求

3.先看场景图

在这里插入图片描述

4.实现代码

html文件
这里点击下载给它一个loading效果。

 <Button
   size="small"
   type="primary"
   onClick={requestForEachByDown}
   loading={btnLoad}
 >
   下载
 </Button>

ts文件

  const [btnLoad, setBtnLoad] = useState(false); // 下载loading
  const [selectedUrls, setSelectedUrls] = useState([]);// 批量勾选的下载地址集合
  // 遍历请求下载
  const requestForEachByDown = () => {
    setBtnLoad(true)
    const proArr = [] // 多个Promise实例
    if (selectedUrls?.length > 0) {
      selectedUrls.forEach((url, index) => {
        proArr[index] = new Promise((resolve) => {
          getAPI({ url }).then((res) => {
            resolve(res)
          })
        })
      })
      Promise.all(proArr).then((resArr) => {
        if (resArr?.length > 0) {
          resArr?.forEach((item) => {
            setBtnLoad(false)
            // 可以使用循环生成iframe方法实现批量下载
            const iframe = document.createElement("iframe");
            iframe.style.display = "none"; // 不可见
            iframe.style.height = "0"; // 高度为0
            iframe.src = item?.data?.url; // 下载地址
            document.body.appendChild(iframe); // 必须有，iframe挂在到dom树触发请求

            //window.open下载文件下载多个文件时，window.open会中断循环。
            // window.open(item?.data?.url, '_self');

          })
        }
      })
    }
  }