前端接受后端文件流并下載的幾種方法

lifesimple 發布于2019-08-23 14:06 / 2087人閱讀

摘要：前言項目中經常會遇到需要導出列表內容，或者下載文件之類的需求。結合各種情況，我總結了前端最常用的三種方法來接受后端傳過來的文件流并下載，針對不同的情況可以使用不同的方法。如果后端提供的下載接口是類型，就必須要用方法二或者方法三了。

前言

項目中經常會遇到需要導出列表內容，或者下載文件之類的需求。結合各種情況，我總結了前端最常用的三種方法來接受后端傳過來的文件流并下載，針對不同的情況可以使用不同的方法。

方法一 使用場景

針對后端的get請求

具體實現

下載文件

直接用個標簽來接受后端的文件流

方法二 使用場景

針對后端的post請求
利用原生的XMLHttpRequest方法實現

具體實現

function request () {
    const req = new XMLHttpRequest();
    req.open("POST", "<接口地址>", true);
    req.responseType = "blob";
    req.setRequestHeader("Content-Type", "application/json");
    req.onload = function() {
      const data = req.response;
      const a = document.createElement("a");
      const blob = new Blob([data]);
      const blobUrl = window.URL.createObjectURL(blob);
      download(blobUrl) ;
    };
    req.send("<請求參數：json字符串>");
  };

function download(blobUrl) {
  const a = document.createElement("a");
  a.style.display = "none";
  a.download = "<文件名>";
  a.href = blobUrl;
  a.click();
  document.body.removeChild(a);
}

request();

方法三 使用場景

針對后端的post請求
利用原生的fetch方法實現

具體實現

function request() {
  fetch("<接口地址>", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: "<請求參數：json字符串>",
  })
    .then(res => res.blob())
    .then(data => {
      let blobUrl = window.URL.createObjectURL(data);
      download(blobUrl);
    });
}

function download(blobUrl) {
  const a = document.createElement("a");
  a.style.display = "none";
  a.download = "<文件名>";
  a.href = blobUrl;
  a.click();
  document.body.removeChild(a);
}

request();

總結

如果后端提供的下載接口是get類型，可以直接使用方法一，簡單又便捷；當然如果想使用方法二、三也是可以的，不過感覺有點舍近求遠了。

如果后端提供的下載接口是post類型，就必須要用方法二或者方法三了。

方法二和方法三怎么取舍？

當你的項目里的接口請求全是基于XMLHttpRequest實現的，這時方法二就更加適合，只要基于你原來項目中的接口請求工具類加以擴展就行了。

當你的項目里的接口請求全是基于fetch實現的，這時方法三就更加適合，比如我現在的做的一個項目就是基于ant design pro的后臺管理系統，它里面的請求類就是基于fetch的，所以我就直接用的方法三，只要在它的request.js文件中稍作修改就行。

我這里討論的是兩種原生的請求方式，如果你項目中引用了第三方請求包來發送請求，比如axios之類的，那就要另當別論了。

云服務器 GPU云服務器 js緩存的幾種方法最基本的幾種 html的幾種輪播 js的幾種數據類型

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100079.html

實踐解析：Electron實現跨平臺視頻會議的幾種思路

摘要：而現在我們可以利用多種工具框架進行跨平臺開發。實現視頻會議的幾種思路如何利用實現一個視頻會議應用這主要取決于使用什么技術來實現作為業務核心的部分。通過與技術結合，實現了網頁端多方音視頻通訊，可以快速實現部分的開發。作者簡介：張乾澤，聲網 Agora Web 研發工程師對于在線教育、醫療、視頻會議等場景來講，開發面向 Windows、Mac 的跨平臺客戶端是必不可少的一步。在過去，每...

xi4oh4o 2019-08-22 15:32 評論0 收藏0
時間格式的轉化-主要的幾種單位轉換

摘要：誤會說明此時間不是指時間刻，而是時間段小時分鐘秒，時間刻以及日期推薦此主要單位指常用的時，分，秒，時分秒，時分，分秒，無日期無毫秒此一個單位數值保留兩位小數，多個單位不考慮小數目前需求暫時不多，只是一個小轉換。還有很多需要學習，此生不用回頭了。誤會說明此時間不是指時間刻(12:00:00)，而是時間段(3小時10分鐘45秒)，時間刻以及日期推薦 moment.js 此主要單...

mengera88 2019-08-20 18:37 評論0 收藏0
node實現文件下載不得不說的那些事兒

摘要：如果像本例中這樣的場景會遇到這樣一個問題，詳見鏈接當請求參數過長或為了安全，就需要用到下載。寫到這里自己都忍不住想錘自己，給自己挖坑不說，這樣來回請求下載，流量，真的是敗家。這幾天一直在做遠程文件下載的事，現在總算有了解決，特來記錄一下踩過的坑和想揍自己的心需求應用場景是這樣的，底層邏輯數據請求接口是由Java寫的，也就是說原始文件存在Java服務端,返回時有加密措施由于工作...

Coly 2019-08-23 14:12 評論0 收藏0
js面向對象淺析---對象創建的幾種常見方式

摘要：前言雖然使用構造函數或者使用對象字面量可以很方便的用來創建一個對象，但這種方式有一個明顯的缺點使用一個接口創建多個對象會產生很多冗余的代碼。即調用構造函數所創建的那個對象的原型對象好處是可以讓所有對象的實例共享他的屬性的方法。前言雖然使用Object構造函數或者使用對象字面量可以很方便的用來創建一個對象，但這種方式有一個明顯的缺點：使用一個接口創建多個對象會產生很多冗余的代碼。因此...

Invoker 2019-08-21 10:46 評論0 收藏0