最近公司项目中,有对文件的导出(下载)的功能,当然普通的下载方式,比如访问一个后台文件流地址,直接生成对应的文件,下载即可,地址栏中也可携带一些控制参数等(例如?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); } },总结,大致的实现步骤如上,也是整个下载流程的关键点,在此做下记录,前人栽树,后人乘凉。