JavaScript 用fetch 实现异步下载文件功能

 更新时间:2017年07月21日 14:15:36   作者:周华去哪儿  
本文通过实例代码给大家介绍了JavaScript 用fetch 实现异步下载文件功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<!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 编写简单计算器

    这篇文章主要介绍了使用JavaScript 编写简单计算器,需要的朋友可以参考下
    2014-11-11
  • js之切换全屏和退出全屏实现代码实例

    js之切换全屏和退出全屏实现代码实例

    这篇文章主要介绍了js之切换全屏和退出全屏实现代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • js实现数字滚动特效

    js实现数字滚动特效

    这篇文章主要为大家详细介绍了js实现数字滚动特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-12-12
  • WEEX环境搭建与入门详解

    WEEX环境搭建与入门详解

    这篇文章主要介绍了WEEX环境搭建与入门详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • [转]去百度面试的javascript 收获

    [转]去百度面试的javascript 收获

    前两天去了百度面试,1面是很顺利,2面基本是被问晕问傻问成了个白痴。没去之前,自己觉得自己的js还是可以的,但是被考官问的基本变成了白痴。
    2009-04-04
  • PixiJS学习之如何实现文字的绘制

    PixiJS学习之如何实现文字的绘制

    PixiJS是一个开源的基于web的渲染系统,为游戏、数据可视化和其他图形密集型项目提供了极快的性能。这篇文章主要带大家学习一下PixiJS是如何实现文字绘制的,希望对大家有所帮助
    2023-02-02
  • JS根据奖品权重计算中奖概率

    JS根据奖品权重计算中奖概率

    这篇文章主要介绍了JS计算中奖概率实现抽奖的方法,对算法感兴趣的同学,可以参考下
    2021-05-05
  • 微信小程序判断用户是否需要再次授权获取个人信息

    微信小程序判断用户是否需要再次授权获取个人信息

    这篇文章主要介绍了微信小程序判断用户是否需要再次授权获取个人信息,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07
  • 深入理解javascript构造函数和原型对象

    深入理解javascript构造函数和原型对象

    对象,是javascript中非常重要的一个梗,是否能透彻的理解它直接关系到你对整个javascript体系的基础理解,说白了,javascript就是一群对象在搅。。(哔!)。
    2014-09-09
  • 取得窗口大小 兼容所有浏览器的js代码

    取得窗口大小 兼容所有浏览器的js代码

    我们首先把window.innerWidth和window.innerHeight的值分别付给了pageWidth和pageHeight。
    2011-08-08

最新评论