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 相关文章推荐
音乐播放用的的几个函数
Sep 07 Javascript
JavaScript 嵌套函数指向this对象错误的解决方法
Mar 15 Javascript
JSQL 基于客户端的成绩统计实现方法
May 05 Javascript
js中关于一个分号的崩溃示例
Nov 11 Javascript
跟我学习javascript的call(),apply(),bind()与回调
Nov 16 Javascript
jQuery 生成svg矢量二维码
Aug 09 Javascript
关于Iframe父页面与子页面之间的相互调用
Nov 22 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
Dec 26 Javascript
微信小程序 两种为对象属性赋值的方式详解
Feb 23 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
Jun 11 Javascript
vue环境搭建简单教程
Nov 07 Javascript
如何通过setTimeout理解JS运行机制详解
Mar 23 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
DC漫画《蝙蝠侠和猫女》图透 猫女怀孕老爷当爹
2020/04/09 欧美动漫
如何利用PHP执行.SQL文件
2013/07/05 PHP
php计算程序运行时间的简单例子分享
2014/05/10 PHP
laravel 解决路由除了根目录其他都404的问题
2019/10/18 PHP
jQuery DIV弹出效果实现代码
2009/07/03 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
2011/02/11 Javascript
JS 无限级 Select效果实现代码(json格式)
2011/08/30 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
2014/08/18 Javascript
JavaScript中原型和原型链详解
2015/02/11 Javascript
js闭包用法实例详解
2016/12/13 Javascript
微信小程序开发之实现自定义Toast弹框
2017/06/08 Javascript
JavaScript工具库之Lodash详解
2019/06/15 Javascript
JS数组reduce()方法原理及使用技巧解析
2020/07/14 Javascript
Python subprocess模块学习总结
2014/03/13 Python
用Python实现服务器中只重载被修改的进程的方法
2015/04/30 Python
Python获取央视节目单的实现代码
2015/07/25 Python
Python编程中的for循环语句学习教程
2015/10/14 Python
python实现将内容分行输出
2015/11/05 Python
python 多维切片之冒号和三个点的用法介绍
2018/04/19 Python
在Windows中设置Python环境变量的实例讲解
2018/04/28 Python
Python单向链表和双向链表原理与用法实例详解
2018/08/31 Python
解决pyinstaller打包exe文件出现命令窗口一闪而过的问题
2018/10/31 Python
Python魔法方法详解
2019/02/13 Python
Python基于opencv实现的简单画板功能示例
2019/03/04 Python
python如何实现代码检查
2019/06/28 Python
django做form表单的数据验证过程详解
2019/07/26 Python
python如何将两张图片生成为全景图片
2020/03/05 Python
django-xadmin根据当前登录用户动态设置表单字段默认值方式
2020/03/13 Python
解决Pycharm 中遇到Unresolved reference 'sklearn'的问题
2020/07/13 Python
详解HTML5新增标签
2017/11/27 HTML / CSS
HTML5 body设置全屏背景图片的示例代码
2020/12/08 HTML / CSS
荷兰最大的多品牌男装连锁店:Adam Brandstore
2019/12/31 全球购物
学校安全责任书范本
2014/07/23 职场文书
2014年政风行风工作总结
2014/11/22 职场文书
公司借条范本
2015/05/25 职场文书
一文搞懂Golang 时间和日期相关函数
2021/12/06 Golang