ajax发送请求下载字节流形式的excel文件

前言

目前我对前端知识不甚了解，以下描述可能不太专业。

背景

开发项目中导出功能，因为数据量有点大，所以导出可能需要时间有点长，所以想用ajax异步请求。

存在问题

利用传统的js和ajax提供的ajax相关获取响应的方式是无法实现excel文件下载的。

js的XMLHttpRequest对象提供了responseText和responseXML两个属性，获取的是html和xml文件格式，没有提供二进制流获取的方式。参考

jquery提供了$.ajax()方法中返回的响应结果类型包括xml，html，script，json，jsonp，text，其中也没有二进制流文件格式。参考

解决办法

    开发

当使用js开发的时候，就要依靠操作XMLHttpRequest对象来获取响应的二进制流。经过百度我发现虽然这个对象没有提供直接获取流的属性，但是它的文档中responseType是可以返回一个Blob对象的。而Blob对象就是一个二进制数据的对象，只要我们获取到这个对象，就可以获取到需要的excel文件。

代码：

$('.exportBtn').bind("click", function ()
                {
                    var method = 'post';//请求方法
                    var url = 'http://localhost.....';//请求url
                    var xhr = new XMLHttpRequest();//定义一个XMLHttpRequest对象
                    xhr.open(method, url, true);
                    xhr.responseType = 'blob';//设置ajax的响应类型为blob
                    xhr.onload = function ()//当请求完成，响应就绪进入
                    {
                        if (this.status == 200)//当响应状态码为200时进入
                        {
                            var blob = this.response;//获取响应返回的blob对象
                            var a = document.createElement('a');//在dom树上创建一个a标签
                            var url = window.URL.createObjectURL(blob);//这里我的理解是生成一个相对于浏览器的虚拟url，用于指向传入的blob对象，让浏览器可以通过这个url找到这个blob对象
                            a.href = url;//将url赋值给a标签的href属性
                            //设置文件名称
                            a.download = 'NPI_PROJECT.xlsx';//设置设置下载文件的名称
                            a.click();//主动触发a标签点击事件
                        }
                    };
                    xhr.send(JSON.stringify({
                    name : '',
                    status : ''
                    }));//附带参数发送请求
                });

View Code