這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)如何在Emberjs中通過(guò) axios下載文件，文章內(nèi)容豐富且以專(zhuān)業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

目前創(chuàng)新互聯(lián)建站已為上千的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁(yè)空間、網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計(jì)、博羅網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶(hù)導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶(hù)和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

思路

接到這個(gè)需求的話(huà)，想著使用創(chuàng)建 a 鏈接，然后模擬點(diǎn)擊 a 鏈接來(lái)完成下載，但是情況不是這樣的。后端有多于一個(gè)的下載接口，首先是生成下載文件的接口， 這個(gè)接口主要是返回 需要下載的文件的 name 以及相應(yīng)的接口地址。而下載的文件可能不止一個(gè)，同時(shí)，對(duì)文件接口地址發(fā)送 GET 請(qǐng)求，會(huì)返回文件流，但是我們需要的是 CSV 格式的文件，所以想到通過(guò) axios 來(lái)實(shí)現(xiàn)這個(gè)需求。

具體做法

既然方向確定了，那就是去做了。

在項(xiàng)目中安裝插件/導(dǎo)入 axios

現(xiàn)在 Emberjs 封裝好的 axios 插件 - ember-axios ，使用 ember install axios 。這個(gè)插件沒(méi)有文檔，所以只能看源碼，還好源碼比較簡(jiǎn)單，就是簡(jiǎn)單的將 axios 的一些方法封裝成一個(gè) service 內(nèi)的方法。

在項(xiàng)目文件中引入 axios

安裝后在 Emberjs 項(xiàng)目中將此 service 引入近來(lái)

import { inject as service } from '@ember/service';

export default Controller.extend({
 // ...
 axios: service()
 // ...
});

這樣即可使用這個(gè)插件中封裝的一些 axios 的方法。

使用

之前也說(shuō)過(guò)當(dāng)前項(xiàng)目需要先發(fā)送一個(gè)請(qǐng)求，請(qǐng)求文件的接口地址。返回的值的格式為：

{
 "fileNames":[
  "filename=downloadFile1.csv",
  "filename=downloadFile2.csv"
 ],
 "status":"ok"
}

可以看到，如我們所想的那樣，返回的并不一定是單個(gè)文件的地址，所以我們?cè)诮邮盏竭@個(gè)數(shù)據(jù)后：

import { isEmpty } from '@ember/utils';
import { all, reject } from 'rsvp';
//...
.then(data=> {
 if (data.status !== 'ok' || isEmpty(data.fileNames)) {
  return reject();
 }
 return all(data.fileNames.map(ele => {
  return axios.axios({
   url: `${ele}`,
   method: 'get',
   responseType: 'blob'
  });
 }));
});

在等待上面的請(qǐng)求發(fā)送成功之后，我們看看這段代碼的意思。最上面的兩個(gè) import 是引入的一些 Emberjs 中封裝的一些通用方法以及 promies 方法.在 then 之內(nèi)的代碼，先是驗(yàn)證是否返回成功。然后對(duì)數(shù)據(jù)進(jìn)行遍歷，并發(fā)送 axios 封裝的 get 請(qǐng)求。 其中 axios.axios() 是 ember-axios 封裝的 axios.create(this.config()) 源碼地址 ,同時(shí)注意的是 config 對(duì)象中 responseType 填寫(xiě)的是 blob ，這是保證文件能夠下載成功的基礎(chǔ)。

請(qǐng)求發(fā)送成功之后，我們需要對(duì)返回的數(shù)據(jù)進(jìn)行處理，也就是：

.then(data => {
 data.forEach((res, index) => {
  const content = res.data,
   blob = new Blob([content], { type: 'text/csv' }),
   fileName = fileNames[index];

  if ('download' in document.createElement('a')) { // 非IE下載
   const elink = document.createElement('a');

   elink.download = fileName;
   elink.style.display = 'none';
   elink.href = URL.createObjectURL(blob);
   document.body.appendChild(elink);
   elink.click();
   URL.revokeObjectURL(elink.href); // 釋放URL 對(duì)象
   document.body.removeChild(elink);
  } else { // IE10+下載
   navigator.msSaveBlob(blob, fileName);
  }
 });
}).catch(() => {
});

這段代碼需要注意的是我們 new Blob() 接收的是 res.data 這個(gè)需要特別注意。另外就是此方法的第二個(gè)參數(shù)接收的 {type: 'text/csv'} ,因?yàn)榇雾?xiàng)目下載的是 csv 文件格式，其他的可以參考 MIME . 其他的就是創(chuàng)建一個(gè) display:none 的 a 標(biāo)簽，并觸發(fā)點(diǎn)擊事件。這時(shí)候?yàn)g覽器就會(huì)進(jìn)行下載。

上述就是小編為大家分享的如何在Emberjs中通過(guò) axios下載文件了，如果剛好有類(lèi)似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。