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 相关文章推荐
动态修改DOM 里面的 id 属性的弊端分析
Sep 03 Javascript
用Javascript 和 CSS 实现脚注(Footnote)效果
Sep 09 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
Feb 26 Javascript
深入浅出 jQuery中的事件机制
Aug 23 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
Dec 08 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
Jan 14 Javascript
BootStrap selectpicker后台动态绑定数据
Jun 01 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
Jul 12 Javascript
Node.js中流(stream)的使用方法示例
Jul 16 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
Dec 19 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
Oct 10 Javascript
vue-cli设置publicPath小记
Apr 14 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性能的编码技巧以及性能优化详细解析
2013/08/24 PHP
PHP实现的分解质因数操作示例
2018/08/01 PHP
JavaScript的面向对象(一)
2006/11/09 Javascript
麦鸡的TAB切换功能结合了javascript和css
2007/12/17 Javascript
dreamweaver 安装Jquery智能提示
2011/04/02 Javascript
javascript定义变量时加var与不加var的区别
2014/12/22 Javascript
js在指定位置增加节点函数insertBefore()用法实例
2015/01/12 Javascript
javascript实现全角半角检测的方法
2015/07/23 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
2017/03/14 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
2017/04/25 jQuery
jquery+css实现简单的图片轮播效果
2017/08/07 jQuery
ionic2屏幕适配实现适配手机、平板等设备的示例代码
2017/08/11 Javascript
JavaScript 隐性类型转换步骤浅析
2018/03/15 Javascript
微信小程序实现Swiper轮播图效果
2019/11/22 Javascript
koa2的中间件功能及应用示例
2020/03/05 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
2020/10/30 Javascript
[02:29]大剑、皮鞭、女装,这届DOTA2勇士令状里都有
2020/07/17 DOTA
python中Pycharm 输出中文或打印中文乱码现象的解决办法
2017/06/16 Python
Python实现随机选择元素功能
2017/09/14 Python
python 实现数组list 添加、修改、删除的方法
2018/04/04 Python
解决python 输出是省略号的问题
2018/04/19 Python
Python实现ping指定IP的示例
2018/06/04 Python
详解Django的model查询操作与查询性能优化
2018/10/16 Python
对Python 3.2 迭代器的next函数实例讲解
2018/10/18 Python
Python批量修改图片分辨率的实例代码
2019/07/04 Python
浅谈django 重载str 方法
2020/05/19 Python
ubuntu16.04升级Python3.5到Python3.7的方法步骤
2020/08/20 Python
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
2018/09/10 HTML / CSS
美国知名的时尚购物网站:Anthropologie
2016/12/22 全球购物
编写一子程序,将一链表倒序,即使链表表尾变表头,表头变表尾
2016/02/10 面试题
绍兴鲁迅故居导游词
2015/02/09 职场文书
医学生自荐信范文
2015/03/05 职场文书
办公室禁烟通知
2015/04/23 职场文书
MySQL CHAR和VARCHAR该如何选择
2021/05/31 MySQL
Spring实现内置监听器
2021/07/09 Java/Android
Python语言中的数据类型-序列
2022/02/24 Python