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 实现异步下载文件功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • js弹出模式对话框,并接收回传值的方法

    js弹出模式对话框,并接收回传值的方法

    js弹出模式对话框,并接收回传值的方法,需要的朋友可以参考一下
    2013-03-03
  • JS题解leetcode去掉最低工资和最高工资后的工资平均值

    JS题解leetcode去掉最低工资和最高工资后的工资平均值

    这篇文章主要为大家介绍了JS题解leetcode去掉最低工资和最高工资后的工资平均值,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • JS实现网站楼层导航效果代码实例

    JS实现网站楼层导航效果代码实例

    这篇文章主要介绍了JS实现网站楼层导航效果代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-06-06
  • JS实现数组的增删改查操作示例

    JS实现数组的增删改查操作示例

    这篇文章主要介绍了JS实现数组的增删改查操作,结合实例形式分析了javascript针对数组的追加、获取、删除、添加、修改等常见操作技巧与相关注意事项,需要的朋友可以参考下
    2018-08-08
  • javascript 日期工具汇总

    javascript 日期工具汇总

    这篇文章主要为大家详细介绍了javaScript日期工具类的汇总,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • 超详细小程序定位地图模块全系列开发教学

    超详细小程序定位地图模块全系列开发教学

    这篇文章主要介绍了超详细小程序定位地图模块全系列开发教学,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • JS实现将手机号中间的几位数字变成****功能

    JS实现将手机号中间的几位数字变成****功能

    这篇文章主要介绍了用js如何实现将手机号中间的几位数字变成**** _,今天,我们要实现一个很常见并且简单的功能如何将手机号中间的几位数变成****,需要的朋友可以参考下
    2023-09-09
  • Bootstrap源码解读排版(1)

    Bootstrap源码解读排版(1)

    这篇文章主要源码解读了Bootstrap排版,介绍了Bootstrap排版的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • JavaScript实现打开链接页面的方式汇总

    JavaScript实现打开链接页面的方式汇总

    这篇文章主要介绍了JavaScript实现打开链接页面的方式,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • JavaScript实现显示和隐藏图片

    JavaScript实现显示和隐藏图片

    这篇文章主要为大家详细介绍了JavaScript实现显示和隐藏图片,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04

最新评论