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


原文地址:https://www.cnblogs.com/homehtml/p/11827368.html

时间: 2024-11-10 13:29:28

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

jsp页面中添加 enctype="multipart-formdata'无法提交到后台得解决思路

解决产品添加页面中有提交文件的解决思路 设计原则 在jsp页面的表单里面 <form action="ArticleServlet" enctype="multipart/form-data" method="post"> <input type="hidden" name="method" value="add"> <div>  <input

Jquery form.js文件上传返回JSON数据,在IE下提示下载文件的解决办法,并对返回数据进行正确的解析

Jquery from.js插件上传文件非常方便,但是在ie10以下的版本会弹出下载文件对话框 解决方法: 1.在服务端设置response.setContentType("text/plain"); 2.对返回数据正确解析                这时返回的数据不再是json,不能使用解析json的方法进行解析                       var data1=eval("(" + data+ ")");  //将返回的字符

python字符集分析,解决windows下FTPClient下载中文名称文件乱码

python中的中文编码一直以来都是一个极为头大的问题,经常抛出编码转换的异常,python中的str和unicode到底是一个什么东西呢?在python中提到unicode,一般指的是unicode对象,例如'哈哈'的unicode对象为u'\u54c8\u54c8',而str,是一个字节数组,这个字节数组表示的是对unicode对象编码(可以是utf-8.gbk.cp936.GB2312)后的存储的格式.这里它仅仅是一个字节流,没有其它的含义,如果你想使这个字节流显示的内容有意义,就必须用正

【SpringMVC】【EasyUI】关于使用EasyUIForm上传文件,返回JsonIE提示下载文件的解决办法!

先说一下环境 EasyUI+SpringMVC+MyBatis 因为按正常手段,无法使用Ajax来提交一个包含文件的表单,故想到利用EasyUI的Form来提交,EasyUI的form封装了一套伪Ajax提交的方法,所以能够起到以ajax提交文件表单的作用! 但是当文件提交成功后,后台往前台返回了一个Json用来提示上传成功! 但是在其他浏览器下都正常,但是唯独在IE中会提示用户下载这个Json文件! 仔细的查看了下EasyUI的API看到API里有这样的一段话: 也就是说,返回的数据要无需设置

Internet Explorer 浏览器在同一时刻只能从同一域名下载两个文件。

Internet Explorer 浏览器在同一时刻只能从同一域名下载两个文件.至于原因请见 MSDN Blogs:<Internet Explorer and Connection Limits>,如何解除限制请见微软客户帮助与支持主页:<如何将 Internet Explorer 配置为可以同时进行两个以上的下载会话>.不管 Firefox 有多火,无可否认,IE 仍然是浏览器市场的老大.所以,在做系统架构时,不得不去考虑 IE  同时只能从同一域名下载两个文件的限制.如果超过

php一次下载多个文件记载

客户要求将现在的单个下载改成打包下载,正常思路就是将文件临时保存起来再打个压缩包下载,搞了很多天,没搞出来,有2个难题: 1.原来保存的文件为tmp格式,怎样转成xls或xlsx正常的格式. 2.将文件压成zip包之后打不开,总报错. 我只能暂时放弃,找了一个折中的方法.就是将单个文件for循环下载,但由于html自身的限制,下载一个就会停止. 在这感谢网友geel的提醒,最后解决了这个问题. 通过for循环,重新访问文件生成页面,window.open.这才解决了这个问题. 不过这样做还是有个

ios如何获取在 NsData 中下载的音频文件?

ios如何获取在 NsData 中下载的音频文件? 标签: ios  Objective-C 发布时间: 2014/12/12 7:48:06 在我的项目我有 Url 的音频......看看我的代码... ViewController.h #import <UIKit/UIKit.h> #import <AVFoundation/AVFoundation.h> @interface ViewController : UIViewController<AVAudioPlayer

Python-socket发送文件并解决粘包问题

服务器端要先根据客户端要下载的文件进行判断是否存在,还要根据文件大小来进行传送,最后还要比对文件的md5值来判断传送的文件是否正确,通过判断剩余字节来解决粘包问题 服务器端 # -*- coding:utf-8 -*- __author__ = "MuT6 Sch01aR" import socket import os import hashlib server = socket.socket() server.bind(('127.0.0.1',8080)) server.list

win7点击右键不能新建文件夹怎么办?win7右键不能新建文件夹解决方法

一般情况下,大家习惯在win7系统中新建文件夹,归类管理文件,但是一位用户发现win7点击右键不能新建文件夹,怎么回事?因为右键没有新建选项,整理后终于找到原因,发现是注册表有问题被破坏了.针对win7右键不能新建文件夹的问题,接下去小编给大家讲解具体方法. 推荐:win7 64位旗舰版下载 具体方法如下: 1.win7系统鼠标右键,会出现新建的功能,如新建文件夹等: 2.出现没有新建菜单的功能一般是由于注册表被修改了,那么我们打开注册表编辑器.开始运行--输入 regedit命令: 3.打开注