欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-02-24 09:35:48
废话不多说了,直接给大家贴代码了,具体代码如下所示: ...

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

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