JavaScript 用fetch 實現異步下載文件功能
更新時間：2017年07月21日 14:15:36 作者：周華去哪兒
本文通過實例代碼給大家介紹了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 實現異步下載文件功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
今天小編就為大家分享一篇layer實現彈出層自動調節(jié)位置，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
layui 數據表格+分頁+搜索+checkbox+緩存選中項數據的方法
今天小編就為大家分享一篇layui 數據表格+分頁+搜索+checkbox+緩存選中項數據的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
JavaScript 匿名函數（anonymous function）與閉包（closure）
JavaScript 匿名函數（anonymous function）與閉包（closure） ,學習js的朋友可以參考下。2011-10-10
javascript語言是網頁中廣泛使用的一種腳本語言，通過本文給大家介紹javascript基本語法，需要的朋友可以參考下本文2016-01-01
本文匯總了解決js跨域問題的5種方法，除了最后一種使用flash解決跨域問題由于過于高端，沒有做出介紹外，其余四種都做了下總結，這里推薦給有相同需求的小伙伴。2014-12-12
這篇文章主要介紹了JavaScript獲取URL參數的方法分享，主要包括字符串?split?方法、?URLSearchParams?方法、正則匹配方法等，具有一定的參考價值需要的小伙伴可以參考一下2022-04-04
這篇文章主要介紹了微信小程序實現基于三元運算驗證手機號/姓名功能,涉及三元運算符的判定及字符串正則驗證相關操作技巧,需要的朋友可以參考下2019-01-01
這篇文章主要介紹了純前端使用插件pdfjs實現將pdf轉為圖片的步驟,在實現過程中遇到了跨域問題,后臺設置跨域但前端配置無效,最終采用后臺返回PDF的base64格式,通過PDF.js將base64轉換為二進制數據加載PDF,需要的朋友可以參考下2025-01-01
下面小編就為大家?guī)硪黄粋€極為簡單的requirejs實現方法。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
JavaScript 開發(fā)規(guī)范要求(圖文并茂)
作為一名開發(fā)人員（WEB前端JavaScript開發(fā)），不規(guī)范的開發(fā)不僅使日后代碼維護變的困難，同時也不利于團隊的合作，通常還會帶來代碼安全以及執(zhí)行效率上的問題。2010-06-06