對二進位制流檔案實現Blob下載
阿新 • • 發佈:2019-01-07
最近公司專案中,有對檔案的匯出(下載)的功能,當然普通的下載方式,比如訪問一個後臺檔案流地址,直接生成對應的檔案,下載即可,位址列中也可攜帶一些控制引數等(例如?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); } },