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

techstay 发布于2019-08-23 12:29 / 2401人阅读

摘要：一次下载多个文件的解决思路真实经历最近开发项目需要做文件下载，想想挺简单的，之前也做过，后台提供下载接口，前端使用就行了呗。不过开发的时候发现，有些文件有附属文件，点击下载按钮需要下载两个文件，而且不能使用压缩包的形式。

一次下载多个文件的解决思路(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下载、二进制流下载等，有空的小伙伴自行研究吧!

云服务器 GPU云服务器 js一次删除选中的多条数据 js读语音文件下载 js下载服务器文件 js视频上传思路

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98592.html

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

摘要：一次下载多个文件的解决思路真实经历最近开发项目需要做文件下载，想想挺简单的，之前也做过，后台提供下载接口，前端使用就行了呗。不过开发的时候发现，有些文件有附属文件，点击下载按钮需要下载两个文件，而且不能使用压缩包的形式。一次下载多个文件的解决思路(iframe) - Eric 真实经历最近开发项目需要做文件下载，想想挺简单的，之前也做过，后台提供下载接口，前端使用window.l...

HitenDev 2019-08-02 11:48 评论0 收藏0
深入理解 Webpack 打包分块（上）

摘要：而一个哈希字符串就是根据文件内容产生的签名，每当文件内容发生更改时，哈希串也就发生了更改，文件名也就随之更改。很显然这不是我们需要的，如果文件内容发生了更改，的打包文件的哈希应该发生变化，但是不应该。前言随着前端代码需要处理的业务越来越繁重，我们不得不面临的一个问题是前端的代码体积也变得越来越庞大。这造成无论是在调式还是在上线时都需要花长时间等待编译完成，并且用户也不得不花额外的时间和带宽...

Rocko 2019-05-21 16:11 评论0 收藏0
尤大低仿博客带回家

摘要：你没有看错，只需几小时，低仿的尤大作者博客你带回家，有的小朋友可能注意到，为啥这里没说同款和高仿的原因是在还有一些其他的方面，都是简单的实现，我怕说了高仿之后，遭到板砖这样就不好了，现在看病也挺贵的。步骤如下首先登录阿里云控制台。前言就在上周六看到阿里云服务器搞一个活动，6元钱一年的共享虚拟主机。但是之前有使用过，觉得最蛋疼的地方是，它只给你开放一个ftp，而且权限上面也有一些控制...

chanjarster 2019-08-29 12:34 评论0 收藏0
尤大低仿博客带回家

摘要：你没有看错，只需几小时，低仿的尤大作者博客你带回家，有的小朋友可能注意到，为啥这里没说同款和高仿的原因是在还有一些其他的方面，都是简单的实现，我怕说了高仿之后，遭到板砖这样就不好了，现在看病也挺贵的。步骤如下首先登录阿里云控制台。前言就在上周六看到阿里云服务器搞一个活动，6元钱一年的共享虚拟主机。但是之前有使用过，觉得最蛋疼的地方是，它只给你开放一个ftp，而且权限上面也有一些控制...

ztyzz 2019-08-22 11:04 评论0 收藏0
尤大低仿博客带回家

摘要：你没有看错，只需几小时，低仿的尤大作者博客你带回家，有的小朋友可能注意到，为啥这里没说同款和高仿的原因是在还有一些其他的方面，都是简单的实现，我怕说了高仿之后，遭到板砖这样就不好了，现在看病也挺贵的。步骤如下首先登录阿里云控制台。前言就在上周六看到阿里云服务器搞一个活动，6元钱一年的共享虚拟主机。但是之前有使用过，觉得最蛋疼的地方是，它只给你开放一个ftp，而且权限上面也有一些控制...

missonce 2019-08-01 16:47 评论0 收藏0