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代码
Mar 05 Javascript
javascript innerHTML使用分析
Dec 03 Javascript
JavaScript中的全局对象介绍
Jan 01 Javascript
jQuery实现的向下图文信息滚动效果
May 03 Javascript
JavaScript截断字符串的方法
Jul 15 Javascript
JS模拟实现Select效果代码
Sep 24 Javascript
chrome调试javascript详解
Oct 21 Javascript
jQuery实现图片加载完成后改变图片大小的方法
Mar 29 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
May 07 Javascript
详解如何实现一个简单的 vuex
Feb 10 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
Aug 16 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
Jul 20 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-cgi.exe - FastCGI 进程超过了配置的请求超时时限)的问题
2013/07/03 PHP
php安装swoole扩展的方法
2015/03/19 PHP
Symfony2 session用法实例分析
2016/02/04 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
一款JavaScript压缩工具:X2JSCompactor
2007/06/13 Javascript
js获得页面的高度和宽度的方法
2014/02/23 Javascript
jquery文档操作wrap()方法实例简述
2015/01/10 Javascript
EasyUI中在表单提交之前进行验证
2016/07/19 Javascript
jQuery的ready方法实现原理分析
2016/10/26 Javascript
AngularJS实现动态添加Option的方法
2017/05/17 Javascript
JavaScript使用prototype原型实现的封装继承多态示例
2018/08/31 Javascript
小程序获取周围IBeacon设备的方法
2018/10/31 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
2019/04/10 Javascript
最简单的vue消息提示全局组件的方法
2019/06/16 Javascript
ligerUI的ligerDialog关闭刷新的方法
2019/09/27 Javascript
vue单文件组件无法获取$refs的问题
2020/06/24 Javascript
[01:05]主宰至宝剑心之遗
2017/03/16 DOTA
为Python的Tornado框架配置使用Jinja2模板引擎的方法
2016/06/30 Python
对Python+opencv将图片生成视频的实例详解
2019/01/08 Python
Python实现账号密码输错三次即锁定功能简单示例
2019/03/29 Python
简单了解python代码优化小技巧
2019/07/08 Python
简单了解python中的f.b.u.r函数
2019/11/02 Python
Django中ORM找出内容不为空的数据实例
2020/05/20 Python
Python脚本实现Zabbix多行日志监控过程解析
2020/08/26 Python
一些关于python 装饰器的个人理解
2020/08/31 Python
Django+Django-Celery+Celery的整合实战
2021/01/20 Python
基于IE10/HTML5 开发
2013/04/22 HTML / CSS
企业内控岗位的职责
2014/02/07 职场文书
售后服务承诺书怎么写
2014/05/21 职场文书
植物生产学专业求职信
2014/08/08 职场文书
2015年社区创卫工作总结
2015/04/21 职场文书
Mysql Show Profile
2021/04/05 MySQL
基于CSS3画一个iPhone
2021/04/21 HTML / CSS
单身狗福利?Python爬取某婚恋网征婚数据
2021/06/03 Python
nginx lua 操作 mysql
2022/05/15 Servers
Python数组变形的几种实现方法
2022/05/30 Python