简单易用,基于js或vue项目实现一次批量文件下载功能

批量文件下载实现

最新推荐文章于 2025-07-24 16:09:57 发布

时间岁月

最新推荐文章于 2025-07-24 16:09:57 发布

阅读量9.3k

点赞数 8

CC 4.0 BY-SA版权

分类专栏：前端文章标签： js批量下载 vue批量下载 js批量文件下载 vue批量文件下载

本文链接：https://blog.youkuaiyun.com/weixin_40923145/article/details/84107444

前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用JavaScript和iframe实现的批量文件下载方法，通过循环调用downloadFile方法，能够连续下载多个文件而不受iframe相互影响。

页面效果

下面这个是我的项目截图效果

代码

<button @click="bulkDownload()">批量下载</button>

js截图代码

js代码，想用的直接复制下面代码就可以

export const downloadFile = (url) => {
    const iframe = document.createElement("iframe");
    iframe.style.display = "none";  // 防止影响页面
    iframe.style.height = 0;  // 防止影响页面
    iframe.src = url; 
    document.body.appendChild(iframe);  // 这一行必须，iframe挂在到dom树上才会发请求
    // 5分钟之后删除（onload方法对于下载链接不起作用，就先抠脚一下吧）
    setTimeout(()=>{
      iframe.remove();
    }, 5 * 60 * 1000);
}


export default {

   data() {
       return {
            orderAttachment: [
                              {attachPath: 下载地址1},
                              {attachPath: 下载地址2}
                            ]
       }

    }

   methods:{
     bulkDownload(){
          var that = this;
          for(var i =0;i<that.orderAttachment.length;i++){  //循环遍历调用downloadFile方法
            const url = that.orderAttachment[i].attachPath;
             downloadFile(url);         
          }
      }, 
   }

}

iframe 不会相互影响，可以连续下载哦!

喜欢就点个赞吧