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 表单之间的数据传递代码
Dec 04 Javascript
jquery win 7透明弹出层效果的简单代码
Aug 06 Javascript
判断是否安装flash player及当前版本的JS代码
Aug 08 Javascript
浅谈checkbox的一些操作(实战经验)
Nov 20 Javascript
jQuery中Dom的基本操作小结
Jan 23 Javascript
js使用ajax读博客rss示例
May 06 Javascript
jquery 插件实现瀑布流图片展示实例
Apr 03 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
Sep 01 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
Sep 09 Javascript
AngularJS改变元素显示状态
Apr 20 Javascript
JS的Ajax与后端交互数据的实例
Aug 08 Javascript
jQuery实现轮播图及其原理详解
Apr 12 jQuery
详解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容易被忽略而出错陷阱 数字与字符串比较
2011/11/10 PHP
获取用户Ip地址通用方法与常见安全隐患(HTTP_X_FORWARDED_FOR)
2013/06/01 PHP
PHP标准类(stdclass)用法示例
2016/09/28 PHP
总结的一些PHP开发中的tips(必看篇)
2017/03/24 PHP
javascript 写类方式之十
2009/07/05 Javascript
Prototype源码浅析 String部分(四)之补充
2012/01/16 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
2013/05/07 Javascript
JS动态添加Table的TR,TD实现方法
2015/01/28 Javascript
jquery实现textarea 高度自适应
2015/03/11 Javascript
jquery easyUI中ajax异步校验用户名
2016/08/19 Javascript
jquery datatable服务端分页
2016/08/31 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
2016/12/23 Javascript
用ES6写全屏滚动插件的示例代码
2018/05/02 Javascript
js html实现计算器功能
2018/11/13 Javascript
基于JavaScript canvas绘制贝塞尔曲线
2018/12/25 Javascript
JS中的函数与对象的创建方式
2019/05/12 Javascript
vue 地图可视化 maptalks 篇实例代码详解
2019/05/21 Javascript
详解Vue 项目中的几个实用组件(ts)
2019/10/29 Javascript
[01:21]2018DOTA2亚洲邀请赛4.5采访 打DOTA2也能有女朋友?
2018/04/06 DOTA
利用Python操作消息队列RabbitMQ的方法教程
2017/07/19 Python
Python中的浮点数原理与运算分析
2017/10/12 Python
Scrapy框架CrawlSpiders的介绍以及使用详解
2017/11/29 Python
对sklearn的使用之数据集的拆分与训练详解(python3.6)
2018/12/14 Python
解决PyCharm不运行脚本,而是运行单元测试的问题
2019/01/17 Python
python 函数中的内置函数及用法详解
2019/07/02 Python
Python面向对象原理与基础语法详解
2020/01/02 Python
使用python实现微信小程序自动签到功能
2020/04/27 Python
Python如何给函数库增加日志功能
2020/08/04 Python
python Timer 类使用介绍
2020/12/28 Python
实例讲解CSS3中的border-radius属性
2015/08/18 HTML / CSS
印尼最大的网上书店:Gramedia.com
2018/09/13 全球购物
纽约海:Sea New York
2018/11/04 全球购物
初中生三年学习生活的自我评价
2013/11/03 职场文书
档案检查欢迎词
2014/01/13 职场文书
教师自查自纠工作情况报告
2014/10/29 职场文书
Django使用channels + websocket打造在线聊天室
2021/05/20 Python