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

页面效果

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

代码

<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 不会相互影响，可以连续下载哦!

喜欢就点个赞吧