基于js或vue项目实现一次批量文件下载功能

• Z时代
• 2024-01-10
• 分类：综合

页面效果

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

代码

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

以上是 基于js或vue项目实现一次批量文件下载功能 的全部内容， 来源链接： utcz.com/z/379982.html