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 用fetch 实现异步下载文件功能到此结束。年轻时代是培养习惯、希望及信仰的一段时光。小编再次感谢大家对我们的支持!

您可能有感兴趣的文章
javascript请求servlet实现ajax示例(分享)

JavaScript操作表单_动力节点Java学院整理

纯javascript的ajax实现php异步提交表单的简单实例

JavaScript实现Ajax总结

初步了解JavaScript,Ajax,jQuery,并比较三者关系