最近公司專案中，有對檔案的匯出（下載）的功能，當然普通的下載方式，比如訪問一個後臺檔案流地址，直接生成對應的檔案，下載即可，位址列中也可攜帶一些控制引數等（例如?a=1&b=2），但這個專案的api介面，均採用的在headers中傳控制引數方式，故而就只能採用其他方式了。

於是，經過考慮，通過ajax方式請求到後臺的二進位制流檔案，採用Blob物件的方式儲存在本地，這樣檔案的名稱，字尾規則均可由前端自定定義完成，具體方式如下：

本專案基於react+dva+antd的框架組合實現，ajax請求使用的是axios（有興趣的同學可以自行網上查閱學習，在這不做講解），那我們就從專案中擷取部分片段，講述整個實現流程吧。

第一步，獲取資料

return axios.get(url, {
        params: cloneData,
        responseType: 'blob',
        headers
})

第二步，處理資料，具體就是拿到資料後，做自定義化的處理，檔名稱規則等，這裡直接獲取後臺給出的檔名filename

const data = yield call(fileDownload, payload);
      if(data.data && data.data instanceof Blob){
        //獲取後臺檔名
        const realFileName=data['headers']['content-disposition'].split('filename=')[1];
        yield put({type: 'saveFile', payload: {blob: data.data, fileName: realFileName}})
        
      } else {
        throw data
      }
 

第三步，儲存檔案

* saveFile({
      payload: {blob, fileName = 'abcdefg.xls'},
    }, { call }) {
        if (window.navigator.msSaveOrOpenBlob) {
            navigator.msSaveBlob(blob, fileName);
        } else {
            var link = document.createElement('a');
            link.href = window.URL.createObjectURL(blob);
            link.download = fileName;

            //此寫法相容可火狐瀏覽器
            document.body.appendChild(link);

            var evt = document.createEvent("MouseEvents");
            evt.initEvent("click", false, false);
            link.dispatchEvent(evt);

            document.body.removeChild(link);
        }
    },