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 建设银行登陆键盘
Jun 10 Javascript
学习ExtJS accordion布局
Oct 08 Javascript
extJs 下拉框联动实现代码
Apr 09 Javascript
treepanel动态加载数据实现代码
Dec 15 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
Sep 30 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
Apr 14 Javascript
利用浮层使select不可选的实现方法
Dec 03 Javascript
通过jsonp获取json数据实现AJAX跨域请求
Jan 22 Javascript
bmob js-sdk 在vue中的使用教程
Jan 21 Javascript
JavaScript之Blob对象类型的具体使用方法
Nov 29 Javascript
jquery实现聊天机器人
Feb 08 jQuery
Vue props中Object和Array设置默认值操作
Jul 30 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中Session引起的脚本阻塞问题解决办法
2014/04/08 PHP
Laravel使用消息队列需要注意的一些问题
2017/12/13 PHP
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
2007/06/02 Javascript
从jquery的过滤器.filter()方法想到的
2013/09/29 Javascript
详解JavaScript中的表单验证
2015/06/16 Javascript
jquery SweetAlert插件实现响应式提示框
2015/08/18 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
2015/11/03 Javascript
javascript数据类型验证方法
2015/12/31 Javascript
javascript 判断页面访问方式电脑或者移动端
2016/09/19 Javascript
JS实现自动阅读单词(有道单词本添加功能)
2016/11/14 Javascript
JavaScript设计模式之代理模式简单实例教程
2018/07/03 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
2018/08/24 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
2018/09/17 Javascript
通过实例了解JS 连续赋值
2019/09/24 Javascript
three.js利用卷积法如何实现物体描边效果
2019/11/27 Javascript
vuex页面刷新导致数据丢失的解决方案
2020/12/10 Vue.js
python实现定时播放mp3
2015/03/29 Python
深入理解Python中各种方法的运作原理
2015/06/15 Python
python中将两组数据放在一起按照某一固定顺序shuffle的实例
2019/07/15 Python
Python chardet库识别编码原理解析
2020/02/18 Python
django下创建多个app并设置urls方法
2020/08/02 Python
基于Django快速集成Echarts代码示例
2020/12/01 Python
css图标制作教程制作云图标
2014/01/19 HTML / CSS
CSS3制作轮播图的一种方法
2019/11/11 HTML / CSS
html5 移动端视频video的android兼容(去除播放控件、全屏)
2020/03/26 HTML / CSS
俄罗斯披萨、寿司和面食送货到家服务:2 Берега
2019/12/15 全球购物
*p++ 自增p 还是p所指向的变量
2016/07/16 面试题
外语专业毕业生个人的自荐信
2013/11/19 职场文书
幼儿园教师教育感言
2014/02/28 职场文书
现金出纳岗位职责
2014/03/15 职场文书
大学生党员学习焦裕禄精神思想汇报
2014/09/10 职场文书
运动会广播稿50字-100字
2014/10/11 职场文书
师范生见习报告
2014/10/31 职场文书
护士辞职信怎么写
2015/02/27 职场文书
2015年幼儿园保育员工作总结
2015/04/23 职场文书
Python pandas之求和运算和非空值个数统计
2021/08/07 Python