快捷導(dǎo)航

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

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

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

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

<!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 實(shí)現(xiàn)異步下載文件功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

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