前言
目前我对前端知识不甚了解,以下描述可能不太专业。
背景
开发项目中导出功能,因为数据量有点大,所以导出可能需要时间有点长,所以想用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 : '' }));//附带参数发送请求 });