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 相关文章推荐
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
Nov 25 Javascript
javascript抖动元素的小例子
Oct 28 Javascript
jQuery使用andSelf()来包含之前的选择集
May 19 Javascript
jQuery中removeAttr()方法用法实例
Jan 05 Javascript
Javascript中获取对象的原型对象的方法小结
Feb 25 Javascript
浅谈Jquery核心函数
Jun 18 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
Aug 26 Javascript
jQuery读取XML文件的方法示例
Feb 03 Javascript
Vue.js搭建移动端购物车界面
Jun 28 Javascript
angular6的响应式表单的实现
Oct 10 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
Dec 23 Javascript
原生javascript中this几种常见用法总结
Feb 24 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
深入解析Session是否必须依赖Cookie
2013/08/02 PHP
PHP实现数组递归转义的方法
2014/08/28 PHP
thinkphp5框架实现的自定义扩展类操作示例
2019/05/16 PHP
JQuery 网站换肤功能实现代码
2009/11/02 Javascript
ext前台接收action传过来的json数据示例
2014/06/17 Javascript
使用javascript获取页面名称
2014/12/23 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
2015/08/31 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
2016/12/14 Javascript
在nginx上部署vue项目(history模式)的方法
2017/12/28 Javascript
JavaScript实现异步图像上传功能
2018/07/12 Javascript
基于Bootstrap下拉框插件bootstrap-select使用方法详解
2018/08/07 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
2018/08/20 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
2019/03/06 Javascript
利用angular自动编译andriod APK的绕坑经历分享
2019/03/08 Javascript
vueScroll实现移动端下拉刷新、上拉加载
2019/03/22 Javascript
基于JS开发微信网页录音功能的实例代码
2019/04/30 Javascript
vue项目中锚点定位替代方式
2019/11/13 Javascript
jquery绑定事件 bind和on的用法与区别分析
2020/05/22 jQuery
手把手教你如何编译打包video.js
2020/12/09 Javascript
[02:23]2016国际邀请赛中国区预选赛wings晋级之路
2016/06/29 DOTA
python网络编程学习笔记(四):域名系统
2014/06/09 Python
详解Python中的多线程编程
2015/04/09 Python
VTK与Python实现机械臂三维模型可视化详解
2017/12/13 Python
Django中Forms的使用代码解析
2018/02/10 Python
基于Python的微信机器人开发 微信登录和获取好友列表实现解析
2019/08/21 Python
Lentiamo荷兰:在线订购隐形眼镜、隐形眼镜液和太阳镜
2019/10/25 全球购物
护理学毕业生求职信
2013/11/14 职场文书
网站客服岗位职责
2014/04/05 职场文书
档案信息化建设方案
2014/05/16 职场文书
2014基层党员批评与自我批评范文
2014/09/24 职场文书
乡镇干部个人对照检查材料(群众路线)
2014/09/26 职场文书
2015年初中元旦晚会活动总结
2014/11/28 职场文书
乌镇导游词
2015/02/02 职场文书
确保工程质量承诺书
2015/04/29 职场文书
MySQL的索引你了解吗
2022/03/13 MySQL
python如何查找列表中元素的位置
2022/05/30 Python