一次下载多个文件的解决思路-JS

Posted homehtml

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了一次下载多个文件的解决思路-JS相关的知识,希望对你有一定的参考价值。

一次下载多个文件的解决思路(iframe) - Eric


真实经历

最近开发项目需要做文件下载,想想挺简单的,之前也做过,后台提供下载接口,前端使用window.location.href就行了呗。不过开发的时候发现,有些文件有附属文件,点击 下载按钮 需要下载两个文件,而且不能使用压缩包的形式。想想不是也挺简单,点击 下载 发送两个下载请求不就搞定了么。

说干就干,三下五除二就写好了,当点击 下载 的那一刻懵逼了, 第一个请求竟然自动Cancelled了,顿时一万个草泥马崩腾而过(因为是国外服务器,下载比较慢导致第一个请求被Cancelled),这就意味着快速点击不同的 下载 按钮也会有同样的问题,这不行啊,然后开始了自己的下载探索之旅。


a标签 & location.href

我们知道a标签及href指向的如果是一个下载链接,那么相当于下载文件,对于单文件下载还是ok的,不过快速点击几个下载按钮,有的下载会被Cancelled,这可不行,继续百度。

上一段代码:

const download = (url)=>{
   window.location.href = url;
}

window.open

我们知道window.open可以打开一个新窗口,那么是不是可以实现下载呢,激动的我赶紧试了试,下载的确可以,不过会快速打开一个新窗口并且关闭,体验非常不好,果断放弃了。


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);
}

ps: iframe不会相互影响,可以连续下载哦!


其他方案

当然还有一些其他方式,Form下载、二进制流下载等,有空的小伙伴自行研究吧!


以上是关于一次下载多个文件的解决思路-JS的主要内容,如果未能解决你的问题,请参考以下文章

大文件上传下载实现思路,分片断点续传代码实现,以及webUpload组件

Three.js HDRCubeTextureLoader 基于多个HDR文件的场景渲染思路

window.open(url)多次打开下载链接被浏览器拦截问题解决方案,js实现循环访问多个下载链接

执行代码时有时不显示对话框片段

js代码片段

前台JS可以一次性批量下载多个Excel表格吗xlsx.full. min