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

2018-10-23 admin

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


原文链接:https://segmentfault.com/a/1190000016771027

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-43418.html

文章标题:一次下载多个文件的解决思路-JS

相关文章
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
Android中Okhttp3实现上传多张图片同时传递参数
之前上传图片都是直接将图片转化为io流传给服务器,没有用框架传图片。 最近做项目,打算换个方法上传图片。 Android发展到现在,Okhttp显得越来越重要,所以,这次我选择用Okhttp上传图片。 Okhttp目前已经更新到Okhttp...
2017-03-17
Node.js 2014这一年发生了什么
Node.js 的 2014 年充满了不幸和争议. 这一年 Noder 们经历了太多的伤心事, 经历了漫长的等待, 经历了沉重的分裂之痛. 也许 Noder 们不想回忆14年 Node.js land 发生的事情, 但正因为痛才更有铭记的价...
2015-11-12
Angular2-primeNG文件上传模块FileUpload使用详解
近期在学习使用Angular2做小项目,期间用到很多primeNG的模块。 本系列将结合实战总结angular2-primeNG各个模块的使用经验。 文件上传模块FileUploadModule 首先要在使用该组件的模块内导入文件上传模块 ...
2017-03-09
React.js编程思想
JavaScript框架层出不穷,在很多程序员看来,React.js是创建大型、快速的Web应用的最好方式。这一款由Facebook出品的JS框架,无论是在Facebook还是在Instagram中,它的表现都非常出色。 使用React.j...
2015-11-12
JavaScript常用特效chm下载
下载地址:JavaScript常用特效chm下载 对了,如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
从2014年的发展来展望JS的未来将会如何
<font face="寰杞, Arial, sans-serif ">2014骞达杞浠惰杩瑷灞涓┓锛互婊¤冻ㄦ涓姹浜...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...
2017-03-13
回到顶部