在vue中实现多个文件下载&&element ui 实现弹窗

目录

1 在vue中实现多个文件下载

后端返回多个URL，前端直接点击下载

1.1 window.open

let url = “xxx”;
window.open(url)
在新窗口打开该下载链接，只能打开一个，多个文件下载不支持

1.2 iframe方法

使用iframe方法（此方法浏览器会跳出弹窗，是否允许下载多个文件，用户体验不好）

exportconstdownloadFile=(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);}//以下写在script标签的方法里exportList(){let tempUrl ="后端的接口-下载用的URL";let tempUrl2 ="后端的接口-下载用的URL";// window.open(tempUrl)let files =[tempUrl,tempUrl2];for(let i=0; i<files.length; i++){downloadFile(files[i])}},

1.3 使用a标签

使用a标签（不用点允许多个文件下载）
● 对于同源文件，通过a标签可以实现批量下载能力
● 跨域文件，同样只成功下载了一两个文件，其余文件请求出现canceled
（以上没实验，其他同学总结的结论）
不过最后我使用了以下a标签批量下载的方法成功实现

//导出按钮点击exportList(){let tempUrl ="后端的接口-下载用的URL";let tempUrl2 ="后端的接口-下载用的URL";// window.open(tempUrl)let files =[tempUrl,tempUrl2];for(let i=0; i<files.length; i++){this.downloadFile1(files[i])}},downloadFile1(url){const a = document.createElement('a');
      a.href = url;// 文件链接
      a.download = url;// 文件名，跨域资源download无效
      a.click();
      a.remove();},

2 element ui 实现弹窗

思路：
点击a跳出弹窗，此时动态绑定一个变量控制是否显示弹窗，并把这个变量传给子组件（弹窗），弹窗右上角x绑定一个点击事件，控制传过来的布尔变量变化。

(记录日常学习生活，如有不对，欢迎大家指正，帮我修正一下哈哈)