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 相关文章推荐
JS去除数组重复值的五种不同方法
Sep 06 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
Aug 06 Javascript
JavaScript编程中window的location与history对象详解
Oct 26 Javascript
Bootstrap表单控件学习使用
Mar 07 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
从零开始在NPM上发布一个Vue组件的方法步骤
Dec 20 Javascript
解决Vue打包上线之后部分CSS不生效的问题
Nov 12 Javascript
JavaScript异步操作的几种常见处理方法实例总结
May 11 Javascript
jQuery实现滑动开关效果
Aug 02 jQuery
解决ant Design中Select设置initialValue时的大坑
Oct 29 Javascript
用JS写一个发布订阅模式
Nov 07 Javascript
vue项目打包后路由错误的解决方法
Apr 13 Vue.js
详解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
eAccelerator的安装与使用详解
2013/06/13 PHP
浅析SVN常见问题及解决方法
2013/06/21 PHP
WordPress中给媒体文件添加分类和标签的PHP功能实现
2015/12/31 PHP
php生成微信红包数组的方法
2019/09/05 PHP
phpstorm激活码2020附使用详细教程
2020/09/25 PHP
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
2007/03/12 Javascript
jQuery数组处理方法汇总
2011/06/20 Javascript
jQuery与getJson结合的用法实例
2015/08/07 Javascript
浅谈jquery中使用canvas的问题
2016/10/10 Javascript
H5手机端多文件上传预览插件
2017/04/21 Javascript
Node.js 实现简单的接口服务器的实例代码
2017/05/23 Javascript
React Hooks的深入理解与使用
2018/11/12 Javascript
详解微信小程序-获取用户session_key,openid,unionid - 后端为nodejs
2019/04/29 NodeJs
利用es6 new.target来对模拟抽象类的方法
2019/05/10 Javascript
新手入门带你学习JavaScript引擎运行原理
2019/06/24 Javascript
JavaScript闭包原理与用法学习笔记
2020/05/29 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
2020/12/30 jQuery
深度定制Python的Flask框架开发环境的一些技巧总结
2016/07/12 Python
Python pygorithm模块用法示例【常见算法测试】
2018/08/16 Python
Python操作列表常用方法实例小结【创建、遍历、统计、切片等】
2019/10/25 Python
使用Python求解带约束的最优化问题详解
2020/02/11 Python
tensorflow 获取checkpoint中的变量列表实例
2020/02/11 Python
python的help函数如何使用
2020/06/11 Python
Python3读写ini配置文件的示例
2020/11/06 Python
python实现图像高斯金字塔的示例代码
2020/12/11 Python
CSS3中的display:grid,网格布局介绍
2019/10/30 HTML / CSS
The Hut德国站点:时装、家居用品、美容等
2016/09/23 全球购物
中国京东和泰国中央集团合资的网站:JD CENTRAL
2020/08/22 全球购物
优秀医生事迹材料
2014/02/12 职场文书
初中班主任评语
2014/04/24 职场文书
冬季安全检查方案
2014/05/23 职场文书
国际贸易毕业生求职信
2014/07/20 职场文书
集体生日活动方案
2014/08/18 职场文书
乡镇领导班子四风整顿行动工作汇报
2014/10/25 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
欠条范文
2015/07/03 职场文书