对二进制流文件实现Blob下载

最近公司项目中，有对文件的导出（下载）的功能，当然普通的下载方式，比如访问一个后台文件流地址，直接生成对应的文件，下载即可，地址栏中也可携带一些控制参数等（例如?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);
    }
}