JavaScript 用fetch 實現(xiàn)異步下載文件功能

更新時間：2017年07月21日 14:15:36 作者：周華去哪兒

本文通過實例代碼給大家介紹了JavaScript 用fetch 實現(xiàn)異步下載文件功能，非常不錯，具有參考借鑒價值,需要的朋友可以參考下

廢話不多說了，直接給大家貼代碼了，具體代碼如下所示：

<!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>

總結(jié)

以上所述是小編給大家介紹的JavaScript 用fetch 實現(xiàn)異步下載文件功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

使用JavaScript 編寫簡單計算器
這篇文章主要介紹了使用JavaScript 編寫簡單計算器,需要的朋友可以參考下
2014-11-11
js之切換全屏和退出全屏實現(xiàn)代碼實例
這篇文章主要介紹了js之切換全屏和退出全屏實現(xiàn)代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2019-09-09
js實現(xiàn)數(shù)字滾動特效
這篇文章主要為大家詳細介紹了js實現(xiàn)數(shù)字滾動特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-12-12
WEEX環(huán)境搭建與入門詳解
這篇文章主要介紹了WEEX環(huán)境搭建與入門詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-10-10
[轉(zhuǎn)]去百度面試的javascript 收獲
前兩天去了百度面試，1面是很順利，2面基本是被問暈問傻問成了個白癡。沒去之前，自己覺得自己的js還是可以的，但是被考官問的基本變成了白癡。
2009-04-04
PixiJS學(xué)習(xí)之如何實現(xiàn)文字的繪制
PixiJS是一個開源的基于web的渲染系統(tǒng)，為游戲、數(shù)據(jù)可視化和其他圖形密集型項目提供了極快的性能。這篇文章主要帶大家學(xué)習(xí)一下PixiJS是如何實現(xiàn)文字繪制的，希望對大家有所幫助
2023-02-02
JS根據(jù)獎品權(quán)重計算中獎概率
這篇文章主要介紹了JS計算中獎概率實現(xiàn)抽獎的方法，對算法感興趣的同學(xué)，可以參考下
2021-05-05
微信小程序判斷用戶是否需要再次授權(quán)獲取個人信息
這篇文章主要介紹了微信小程序判斷用戶是否需要再次授權(quán)獲取個人信息,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2019-07-07
深入理解javascript構(gòu)造函數(shù)和原型對象
對象，是javascript中非常重要的一個梗，是否能透徹的理解它直接關(guān)系到你對整個javascript體系的基礎(chǔ)理解，說白了，javascript就是一群對象在攪。。（嗶?。?。
2014-09-09
取得窗口大小兼容所有瀏覽器的js代碼
我們首先把window.innerWidth和window.innerHeight的值分別付給了pageWidth和pageHeight。
2011-08-08