摘要： 目前項目中需要與后端合作，通過發送 GET 請求，后端返回文件流，前端進行文件的下載。

使用到的技術有：

1. Emberjs
2. axios

思路

接到這個需求的話，想著使用創建 a 鏈接，然后模擬點擊 a 鏈接來完成下載，但是情況不是這樣的。后端有多于一個的下載接口，首先是生成下載文件的接口， 這個接口主要是返回 需要下載的文件的 name 以及相應的接口地址。而下載的文件可能不止一個，同時，對文件接口地址發送 GET 請求，會返回文件流，但是我們需要的是 CSV 格式的文件，所以想到通過 axios 來實現這個需求。

具體做法

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

在項目中安裝插件/導入 axios

現在 Emberjs 封裝好的 axios 插件 - ember-axios ，使用 ember install axios 。這個插件沒有文檔，所以只能看源碼，還好源碼比較簡單，就是簡單的將 axios 的一些方法封裝成一個 service 內的方法。

在項目文件中引入 axios

安裝后在 Emberjs 項目中將此 service 引入近來

import { inject as service } from '@ember/service';export default Controller.extend({ // ... axios: service() // ...});

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

使用

之前也說過當前項目需要先發送一個請求，請求文件的接口地址。返回的值的格式為：

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

可以看到，如我們所想的那樣，返回的并不一定是單個文件的地址，所以我們在接收到這個數據后：

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'  }); }));});

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

請求發送成功之后，我們需要對返回的數據進行處理，也就是：

.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 對象   document.body.removeChild(elink);  } else { // IE10+下載   navigator.msSaveBlob(blob, fileName);  } });}).catch(() => {});

這段代碼需要注意的是我們 new Blob() 接收的是 res.data 這個需要特別注意。另外就是此方法的第二個參數接收的 {type: 'text/csv'} ,因為次項目下載的是 csv 文件格式，其他的可以參考 MIME . 其他的就是創建一個 display:none 的 a 標簽，并觸發點擊事件。這時候瀏覽器就會進行下載。

總結

這算是在 Embjerjs 中進行下載流文件的一次船新嘗試。

以上所述是小編給大家介紹的Emberjs 通過 axios 下載文件的方法,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！