JavaScript 用fetch 实现异步下载文件功能


Posted in Javascript onJuly 21, 2017

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<!DOCTYPE html> 
<html> 
<head> 
  <meta charset="utf-8"> 
  <title>sample</title> 
</head> 
<body> 
  <button id='btn'>下载</button> 
  <span id='status'></span> 
</body> 
<script> 
  var url = "http://localhost/sample/upload.php"; 
  document.getElementById('btn').onclick = function() { 
    document.getElementById('status').innerHTML = '下载中'; 
    fetch(url).then(res => res.blob().then(blob => { 
      var a = document.createElement('a'); 
      var url = window.URL.createObjectURL(blob); 
      var filename = res.headers.get('Content-Disposition'); 
      a.href = url; 
      a.download = filename; 
      a.click(); 
      window.URL.revokeObjectURL(url); 
      document.getElementById('status').innerHTML = '下载完成'; 
    })); 
  }; 
</script> 
</html>

总结

以上所述是小编给大家介绍的JavaScript 用fetch 实现异步下载文件功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery 可以拖动的div实现代码 脚本之家修正版
Jun 26 Javascript
Javascript 圆角div的实现代码
Oct 15 Javascript
JS实现文字放大效果的方法
Mar 03 Javascript
百度地图自定义控件分享
Mar 04 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
Jun 06 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
Dec 25 Javascript
setTimeout学习小结
Feb 08 Javascript
ES6中Iterator与for..of..遍历用法分析
Mar 31 Javascript
JavaScript实现职责链模式概述
Jan 25 Javascript
通过循环优化 JavaScript 程序
Jun 24 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
Oct 17 Javascript
vue使用nprogress加载路由进度条的方法
Jun 04 Javascript
详解vue 模版组件的三种用法
Jul 21 #Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
Jul 21 #Javascript
vue-resource调用promise取数据方式详解
Jul 21 #Javascript
Vue resource中的GET与POST请求的实例代码
Jul 21 #Javascript
Angular+Bootstrap+Spring Boot实现分页功能实例代码
Jul 21 #Javascript
es7学习教程之Decorators(修饰器)详解
Jul 21 #Javascript
VUE中使用Vue-resource完成交互
Jul 21 #Javascript
You might like
关于UEditor编辑器远程图片上传失败的解决办法
2012/08/31 PHP
探讨如何使用SimpleXML函数来加载和解析XML文档
2013/06/07 PHP
php基于curl实现的股票信息查询类实例
2016/11/11 PHP
PHP如何获取当前主机、域名、网址、路径、端口等参数
2017/06/09 PHP
js loading加载效果实现代码
2009/11/24 Javascript
Jquery下判断Id是否存在的代码
2011/01/06 Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
2012/05/14 Javascript
通过Jquery的Ajax方法读取将table转换为Json
2014/05/31 Javascript
Javascript无参数和有参数类继承问题解决方法
2015/03/02 Javascript
JavaScript中5种调用函数的方法
2015/03/12 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
2016/12/27 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
2017/03/08 Javascript
ES6解构赋值的功能与用途实例分析
2017/10/31 Javascript
vue watch监听对象及对应值的变化详解
2018/02/24 Javascript
解决vue页面DOM操作不生效的问题
2018/03/17 Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
2019/04/02 Javascript
vue-cli在 history模式下的配置详解
2019/11/26 Javascript
[01:05:52]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第一场 2月2日
2021/03/11 DOTA
tornado 多进程模式解析
2018/01/15 Python
python如何把嵌套列表转变成普通列表
2018/03/20 Python
Python爬虫信息输入及页面的切换方法
2018/05/11 Python
Python lambda表达式用法实例分析
2018/12/25 Python
使用Python批量修改文件名的代码实例
2019/01/24 Python
用scikit-learn和pandas学习线性回归的方法
2019/06/21 Python
在pytorch中为Module和Tensor指定GPU的例子
2019/08/19 Python
pandas中的数据去重处理的实现方法
2020/02/10 Python
详解python中的异常捕获
2020/12/15 Python
10分钟入门CSS3 Animation
2018/12/25 HTML / CSS
吃透移动端 Html5 响应式布局
2019/12/16 HTML / CSS
工程部经理岗位职责
2013/12/08 职场文书
俄罗斯商务邀请函
2014/01/26 职场文书
家长写给孩子的评语
2014/04/18 职场文书
取保候审保证书
2014/04/30 职场文书
党支部三会一课计划
2014/09/24 职场文书
班主任寄语2016
2015/12/04 职场文书
SQL SERVER存储过程用法详解
2022/02/24 SQL Server