JavaScript

超轻量级php框架startmvc

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

更新时间:2020-05-26 02:30:01 作者:startmvc
废话不多说了,直接给大家贴代码了,具体代码如下所示:<!DOCTYPEhtml><html><head&g

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


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