開篇一張圖

前言

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

方法一

使用場景

針對后端的get請求

具體實現(xiàn)

<a href="后端文件下載接口地址" >下載文件</a>

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

方法二

使用場景

針對后端的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類型颓哮，可以直接使用方法一，簡單又便捷鸵荠；當然如果想使用方法二题翻、三也是可以的，不過感覺有點舍近求遠了腰鬼。
• 如果后端提供的下載接口是post類型嵌赠，就必須要用方法二或者方法三了。

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

• 當你的項目里的接口請求全是基于XMLHttpRequest實現(xiàn)的姜挺，這時方法二就更加適合，只要基于你原來項目中的接口請求工具類加以擴展就行了彼硫。
• 當你的項目里的接口請求全是基于fetch實現(xiàn)的炊豪，這時方法三就更加適合，比如我現(xiàn)在的做的一個項目就是基于ant design pro的后臺管理系統(tǒng)拧篮，它里面的請求類就是基于fetch的词渤，所以我就直接用的方法三，只要在它的request.js文件中稍作修改就行串绩。
• 我這里討論的是兩種原生的請求方式缺虐，如果你項目中引用了第三方請求包來發(fā)送請求，比如axios之類的礁凡，那就要另當別論了高氮。