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

　

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);
        }
    },

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

相关阅读

ftl模板文件编辑器

ftl模板文件编辑器 最近博主在研究模板引擎Freemarker生成Word文件相关知识，博主采用的Eclipse进行开发，使用自带的JSP框架来编辑f

魔鬼约会学（阮琦著，同心出版社）.epub 免费下载

下载地址： 魔鬼约会学（阮琦著，同心出版社）[www.rejoiceblog.com].epub

c语言实现循环队列

接口参考严蔚敏老师的数据结构 难点 开始队列为空时front = rear = 0，队列满时如果也是front = rear，则很难判断空满两个状态，因此

分别导入.xls和.xlsx后缀的excel文件

Java导入excel文件，暂时找到两种方法，分别对应.xls和.xlsx文件。 1，首先创建一个user类，后面会用到。 package importMethod; impo

新浪博客账号快速收录技巧，实现百度霸屏效果！

今天给大家分享一篇如何利用SEO技术快速获取博客关键词排名的技巧！主要有三个方面： 博客SEO 第一：黏住粉丝 用户浏览我们的博客，无非