javascript实现多个任务一次下载的方法介绍

本篇文章给大家带来的内容是关于php协成实现的详解(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

真实经历

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

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

a标签 & location.href

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

立即学习“Java免费学习笔记(深入)”;

上一段代码:

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下载、二进制流下载等,有空的小伙伴自行研究吧!

以上就是javascript实现多个任务一次下载的方法介绍的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2738410.html

(0)
上一篇 2025年3月8日 01:50:07
下一篇 2025年3月8日 01:50:15

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • React路由懒加载实现的另种方案(代码)

    本篇文章给大家带来的内容是关于react路由懒加载实现的另种方案(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 这篇文字简单的介绍了React在路由懒加载方面的几种实现方案。 传统的两种方式 import() 符合…

    编程技术 2025年3月8日
    200
  • JS的组合继承是什么?js组合继承的介绍

    本篇文章给大家带来的内容是关于js的组合继承是什么?js组合继承的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 组合继承(Combination Inheritance) 组合继承(Combination Inher…

    编程技术 2025年3月8日
    200
  • javascript借用构造函数的解析(附示例)

    本篇文章给大家带来的内容是关于javascript借用构造函数的解析(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 借用构造函数 为了解决原型中包含引用类型值所带来问题,开发人员开始使用一种叫做借用构造函数(co…

    编程技术 2025年3月8日
    200
  • js运算符有哪些?js运算符的详细介绍

    本篇文章给大家带来的内容是关于js运算符有哪些?js运算符的详细介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 javascript 基础运算符分为:算术运算符、赋值运算符、关系运算符、逻辑运算符;接下来详细讲解着几种…

    编程技术 2025年3月8日
    200
  • React渲染列表的方法介绍(附代码)

    本篇文章给大家带来的内容是关于react渲染列表的方法介绍(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 对于一个展示页面来讲, 通常有好几种展示状态(以列表页为例): 数据为空, 空页面取数据时发生错误, 错误…

    编程技术 2025年3月8日
    200
  • javascript递归函数的详解(附示例)

    本篇文章给大家带来的内容是关于javascript递归函数的详解(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 递归函数看过很多次,但是感觉一直都没有完全的理解,这次有空看了下>,又静下心来重新看了一遍递归…

    编程技术 2025年3月8日
    200
  • Node Stream的运行机制讲解(附示例)

    本篇文章给大家带来的内容是关于node stream的运行机制讲解(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 如果你正在学习Node,那么流一定是一个你需要掌握的概念。如果你想成为一个Node高手,那么流一定…

    2025年3月8日 编程技术
    200
  • 如何使用el-checkbox实现全选(代码)

    本篇文章给大家带来的内容是关于使用el-checkbox实现全选(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 最近在公司接收到了一个需求,给收藏夹的书籍添加批量、全选删除实现思路:点击全选改变item的check…

    编程技术 2025年3月8日
    200
  • js中操作符分成哪些类型?分别有哪些?

    本篇文章给大家带来的内容是介绍javascript中操作符分成哪些类型?分别有哪些?有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 在JavaScript中有算数操作符、赋值操作符、比较操作符、逻辑操作符、位操作符、一元操…

    2025年3月8日 编程技术
    200
  • 详解javaScript条件语句之if…else与switch语句

    本篇文章给大家带来的内容是详解javascript条件语句之if…else与switch语句。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 if…else条件语句 如果想让一个脚本在条件仅为tru…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论