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 相关文章推荐
cookie的复制与使用记住用户名实现代码
Nov 04 Javascript
Egret引擎开发指南之发布项目
Sep 03 Javascript
jquery调取json数据实现省市级联的方法
Jan 29 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
Mar 19 Javascript
jQuery控制Div拖拽效果完整实例分析
Apr 15 Javascript
在javascript中创建对象的各种模式解析
May 16 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
Jun 22 Javascript
微信小程序 开发经验整理
Feb 15 Javascript
react native实现往服务器上传网络图片的实例
Aug 07 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
Nov 22 Javascript
微信小程序实现传参数的几种方法示例
Jan 10 Javascript
webpack公共组件引用路径简化小技巧
Jun 15 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支持页面回退的两种方法
2008/01/10 PHP
PHP内置的Math函数效率测试
2014/12/01 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
php实现微信支付之退款功能
2018/05/30 PHP
详解PHP实现支付宝小程序用户授权的工具类
2018/12/25 PHP
PHP 对象继承原理与简单用法示例
2020/04/21 PHP
让您的菜单不离网站
2006/10/03 Javascript
js中符号转意问题示例探讨
2013/08/19 Javascript
js 剪切板应用clipboardData详细解析
2013/12/17 Javascript
解决jquery插件冲突的问题
2014/01/23 Javascript
JS将光标聚焦在文本最后的实现代码
2014/03/28 Javascript
解释&amp;&amp;和||在javascript中的另类用法
2014/07/28 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
2015/04/06 Javascript
基于JavaScript实现定时跳转到指定页面
2016/01/01 Javascript
Bootstrap的基本应用要点浅析
2016/12/19 Javascript
新闻上下滚动jquery 超简洁(必看篇)
2017/01/21 Javascript
JavaScript实现动态添加Form表单元素的方法示例
2017/08/14 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
2017/09/01 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
2018/09/11 Javascript
Echarts之悬浮框中的数据排序问题
2018/11/08 Javascript
vue开发环境配置跨域的方法步骤
2019/01/16 Javascript
JS集合set类的实现与使用方法示例
2019/02/01 Javascript
Vue的H5页面唤起支付宝支付功能
2019/04/18 Javascript
[47:38]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
pandas值替换方法
2018/07/10 Python
使用Django搭建web服务器的例子(最最正确的方式)
2019/08/29 Python
python中元组的用法整理
2020/06/15 Python
解决Alexnet训练模型在每个epoch中准确率和loss都会一升一降问题
2020/06/17 Python
Pytorch 卷积中的 Input Shape用法
2020/06/29 Python
Jmeter HTTPS接口测试证书导入过程图解
2020/07/22 Python
体验完美剃须:The Art of Shaving
2018/08/06 全球购物
意大利一家专营包包和配饰的网上商店:Borse Last Minute
2019/08/26 全球购物
Luxplus荷兰:以会员价购买美容产品等,独家优惠
2019/08/30 全球购物
老干部工作先进集体事迹材料
2014/05/21 职场文书
员工工作表现自我评价
2015/03/06 职场文书
解决Python字典查找报Keyerror的问题
2021/05/26 Python