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 html 静态页面传参数
Apr 10 Javascript
纯Javascript实现ping功能的方法
Mar 20 Javascript
js库Modernizr的介绍和使用
May 07 Javascript
完美的js图片轮换效果
Feb 05 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
Feb 22 Javascript
vue二级菜单导航点击选中事件的方法
Sep 12 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
Sep 14 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
Oct 18 Javascript
vue登录注册实例详解
Sep 14 Javascript
如何通过javaScript去除字符串两端的空白字符
Feb 06 Javascript
Vue实现简单的跑马灯
May 25 Javascript
vue+springboot+element+vue-resource实现文件上传教程
Oct 21 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
php+memcache实现的网站在线人数统计代码
2014/07/04 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
js 加载并解析XML字符串的代码
2009/12/13 Javascript
深入理解JavaScript系列(16) 闭包(Closures)
2012/04/12 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
2014/09/24 Javascript
jQuery源码解读之removeClass()方法分析
2015/02/20 Javascript
PHP守护进程实例
2015/03/06 Javascript
详细探究ES6之Proxy代理
2016/07/22 Javascript
javascript 定时器工作原理分析
2016/12/03 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
2017/02/27 Javascript
微信小程序 动态绑定事件并实现事件修改样式
2017/04/13 Javascript
vue-cli3 从搭建到优化的详细步骤
2019/01/20 Javascript
jQuery实现轮播图效果
2019/11/26 jQuery
JavaScript编码小技巧分享
2020/09/17 Javascript
[00:48]DOTA2国际邀请赛公开赛报名开始 扫码开启逐梦之旅
2018/06/06 DOTA
[11:42]2018DOTA2国际邀请赛寻真——OG卷土重来
2018/08/17 DOTA
python判断端口是否打开的实现代码
2013/02/10 Python
pytest中文文档之编写断言
2019/09/12 Python
python将图片转base64,实现前端显示
2020/01/09 Python
Python读入mnist二进制图像文件并显示实例
2020/04/24 Python
python给视频添加背景音乐并改变音量的具体方法
2020/07/19 Python
matplotlib之属性组合包(cycler)的使用
2021/02/24 Python
CSS3属性选择符介绍
2008/10/17 HTML / CSS
详解HTML5常用的语义化标签
2019/09/27 HTML / CSS
美国CVS药店官网:CVS Pharmacy
2018/07/26 全球购物
售前工程师职业生涯规划
2014/03/02 职场文书
静心口服夜广告词
2014/03/20 职场文书
放飞梦想演讲稿
2014/05/05 职场文书
企业负责人任命书
2014/06/05 职场文书
房屋产权共有协议书范本
2014/11/03 职场文书
在职人员跳槽求职信
2015/03/20 职场文书
2015年医院药剂科工作总结
2015/05/04 职场文书
学校捐款活动总结
2015/05/09 职场文书
新闻稿件写作技巧
2015/07/18 职场文书
少先队中队工作总结2015
2015/07/23 职场文书
党员反四风学习心得体会
2016/01/22 职场文书