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 相关文章推荐
JavaScript类库D
Oct 24 Javascript
javascript学习笔记(十) js对象 继承
Jun 19 Javascript
jQuery的slideToggle方法实例
May 07 Javascript
jquery实现页面关键词高亮显示的方法
Mar 12 Javascript
基于Vue.js的表格分页组件
May 22 Javascript
原生js实现倒计时--2018
Feb 21 Javascript
Web制作验证码功能实例代码
Jun 19 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
js中let和var定义变量的区别
Feb 08 Javascript
vue做移动端适配最佳解决方案(亲测有效)
Sep 04 Javascript
vue中组件的3种使用方式详解
Mar 23 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
Sep 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
CI框架安全类Security.php源码分析
2014/11/04 PHP
YII Framework框架教程之使用YIIC快速创建YII应用详解
2016/03/15 PHP
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
2008/11/24 Javascript
理解JavaScript的caller,callee,call,apply
2009/04/28 Javascript
Javascript 继承机制实例
2009/08/12 Javascript
JavaScript中创建字典对象(dictionary)实例
2015/03/31 Javascript
jquery右下角自动弹出可关闭的广告层
2015/05/08 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
2015/10/26 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
2016/08/31 Javascript
打字效果动画的4种实现方法(超简单)
2017/10/18 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
2018/05/04 Javascript
详解各版本React路由的跳转的方法
2018/05/10 Javascript
Angular6笔记之封装http的示例代码
2018/07/27 Javascript
vue.js单文件组件中非父子组件的传值实例
2018/09/13 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
2018/09/14 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
2019/03/16 Javascript
微信小程序视频弹幕发送功能的实现
2020/12/28 Javascript
跟老齐学Python之编写类之二方法
2014/10/11 Python
Python的Flask框架中SQLAlchemy使用时的乱码问题解决
2015/11/07 Python
python 用正则表达式筛选文本信息的实例
2018/06/05 Python
python2与python3的print及字符串格式化小结
2018/11/30 Python
Python实现获取汉字偏旁部首的方法示例【测试可用】
2018/12/18 Python
TensorFlow车牌识别完整版代码(含车牌数据集)
2019/08/05 Python
python 三元运算符使用解析
2019/09/16 Python
HTML5语音识别标签写法附图
2013/11/18 HTML / CSS
金融专业应届生求职信
2013/11/02 职场文书
学期研究性学习个人的自我评价
2014/01/09 职场文书
写求职信有什么意义
2014/02/17 职场文书
大学生应聘求职信
2014/05/26 职场文书
单位工作证明范文
2014/09/14 职场文书
春秋淹城导游词
2015/02/11 职场文书
单位病假条范文
2015/08/17 职场文书
《梅花魂》教学反思
2016/02/18 职场文书
劳动合同变更协议书范本
2019/04/18 职场文书
为什么node.js不适合大型项目
2021/04/28 Javascript
Python Pandas读取Excel日期数据的异常处理方法
2022/02/28 Python