对二进制流文件实现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);
        }
    },

总结，大致的实现步骤如上，也是整个下载流程的关键点，在此做下记录，前人栽树，后人乘凉。