当前位置：首页 > 资讯 > 技术文档

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

时间：2022-01-23 06:58 编辑：来源：阅读：
扫一扫，手机访问

摘要：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>

[b]总结[/b] 以上所述是小编给大家介绍的JavaScript 用fetch 实现异步下载文件功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对编程素材网网站的支持！

全部评论(0)

上一篇：详解React开发中使用require.ensure()按需加载ES6组件
下一篇：ES6数组的扩展详解

资讯排行榜
更多>>