在vue中实现多个文件下载&&element ui 实现弹窗-Toy模板网

这篇具有很好参考价值的文章主要介绍了在vue中实现多个文件下载&&element ui 实现弹窗。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

1.1 window.open

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

1.2 iframe方法

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

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);
}
//以下写在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();
    },