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 相关文章推荐
你需要知道的JavsScript可以做什么?
Jun 29 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
Apr 05 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
Jun 02 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
Jun 05 Javascript
理解javascript回调函数
Dec 28 Javascript
BootStrap3使用错误记录及解决办法
Dec 22 Javascript
zTree异步加载展开第一级节点的实现方法
Sep 05 Javascript
实现div内部滚动条滚动到底部和顶部的代码
Nov 15 Javascript
JS随机数产生代码分享
Feb 24 Javascript
解决Vue打包后访问图片/图标不显示的问题
Jul 25 Javascript
JS document文档的简单操作完整示例
Jan 13 Javascript
前端如何实现动画过渡效果
Feb 05 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
《星际争霸II》全新指挥官斯台特曼现已上线
2020/03/08 星际争霸
Adodb的十个实例(清晰版)
2006/12/31 PHP
ThinkPHP独立分组使用的注意事项
2014/11/25 PHP
PHP+Javascript实现在线拍照功能实例
2015/07/18 PHP
PHP中addslashes与mysql_escape_string的区别分析
2016/04/25 PHP
让whoops帮我们告别ThinkPHP6的异常页面
2020/03/02 PHP
javascript新手语法小结
2008/06/15 Javascript
基于jQuery实现的当离开页面时出现提示的实现代码
2011/06/27 Javascript
jquery实现搜索框常见效果的方法
2015/01/22 Javascript
JQuery日期插件datepicker的使用方法
2016/03/03 Javascript
JS实现六位字符密码输入器功能
2016/08/19 Javascript
js实现html table 行,列锁定的简单实例
2016/10/13 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
2016/10/20 Javascript
详解使用vue-admin-template的优化历程
2018/05/20 Javascript
Laravel admin实现消息提醒、播放音频功能
2019/07/10 Javascript
用js实现放大镜效果
2020/10/28 Javascript
[02:20]DOTA2中文配音宣传片
2013/05/22 DOTA
在Python中使用第三方模块的教程
2015/04/27 Python
Python3实现将文件归档到zip文件及从zip文件中读取数据的方法
2015/05/22 Python
python的else子句使用指南
2016/02/27 Python
详解Python读取配置文件模块ConfigParser
2017/05/11 Python
Python基于回溯法子集树模板解决选排问题示例
2017/09/07 Python
python中is与双等于号“==”的区别示例详解
2017/11/21 Python
Python 支付整合开发包的实现
2019/01/23 Python
Pandas统计重复的列里面的值方法
2019/01/30 Python
详解python编译器和解释器的区别
2019/06/24 Python
Python 获取windows桌面路径的5种方法小结
2019/07/15 Python
python读写文件write和flush的实现方式
2020/02/21 Python
python 将视频 通过视频帧转换成时间实例
2020/04/23 Python
意大利文具和办公产品在线商店:Y-Office
2020/02/27 全球购物
七年级政治教学反思
2014/02/03 职场文书
贷款委托书怎么写
2014/08/02 职场文书
2014年便民服务中心工作总结
2014/12/20 职场文书
大学学生会主席竞选稿怎么写?
2019/08/19 职场文书
python基础学习之生成器与文件系统知识总结
2021/05/25 Python
python 使用pandas读取csv文件的方法
2022/12/24 Python