当前位置: 移动技术网 > IT编程>开发语言>JavaScript > JavaScript 用fetch 实现异步下载文件功能

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

2017年12月12日  | 移动技术网IT编程  | 我要评论

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

<!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 实现异步下载文件功能,希望对大家有所帮助

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网