成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

lifesimple / 2100人閱讀

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

前言

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

方法一 使用場景

針對后端的get請求

具體實現(xiàn) 
下載文件

直接用個標(biāo)簽來接受后端的文件流

方法二 使用場景

針對后端的post請求
利用原生的XMLHttpRequest方法實現(xiàn)

具體實現(xiàn) 
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("<請求參數(shù)：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方法實現(xiàn)

具體實現(xiàn) 
function request() {
  fetch("<接口地址>", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: "<請求參數(shù)：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();
總結(jié)

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

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

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

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/100079.html

相關(guān)文章

  • 實踐解析：Electron實現(xiàn)跨平臺視頻會議的幾種思路

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

    xi4oh4o 評論0 收藏0

  • 時間格式的轉(zhuǎn)化-主要的幾種單位轉(zhuǎn)換

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

    mengera88 評論0 收藏0

  • node實現(xiàn)文件下載不得不說的那些事兒

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

    Coly 評論0 收藏0

  • js面向?qū)ο鬁\析---對象創(chuàng)建的幾種常見方式

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

    Invoker 評論0 收藏0

發(fā)表評論

0條評論

lifesimple

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<