- A+
所属分类:Web前端
前端处理二进制流数据--转下载
导言
因业务需要,实现分类导出功能。筛选导出一定条件的数据,后端处理成Excle
数据流,前端实现导出下载。
实现
方法一
将条件格式化成key=value&...
文本格式,接到<a>
标签url接口之后,每当点击导出按钮的时候,创建一个<a>
标签,写入接口地址+传入数据,JS
点击。最后移除<a>
标签。
代码如下:
//导出按钮点击事件 $('#export').click(function(){ //获取查询条件value //构造键值对 var paramData = {key1:value1,key2:value2,key3:value3,key4:value4}; //这里利用了jQuery的内置方法,将其转换成key=value&...文本格式 paramData = jQuery.param(paramData); //创建一个新的<a>标签 var a = document.createElement('a'); //匹配接口+数据 a.href = '/ba/baRecord/exportExcel?'+paramData; //点击<a> a.click(); //此时,实际应用中,已经跳转下载 //移除<a>标签 a.remove(); });
方法二
使用原生JS
创建POST请求,传入数据,将得到的数据流用Blob(Binary Large Objects)处理。这个方法本人实现无果,欢迎指导。
代码如下:
//导出按钮点击事件 $('#export').click(function(){ //获取查询条件value //构造键值对 var paramData = {key1:value1,key2:value2,key3:value3,key4:value4}; //利用jQuery的内置方法,将其转换成key=value&...文本格式 paramData = jQuery.param(paramData); /* 解释: 这里使用key=value&...文本格式是因为在后端处理传入数据时,需要文本格式。 另一个查询接口亦使用同一个数据接收类,同样传入此类型文本格式,因此延用。 */ //创建请求 let xhr = new XMLHttpRequest(); //规定请求类型,接口,是否同步 xhr.open('post','/ba/baRecord/exportExcel',true); //规定响应类型为blob !important xhr.responseType = 'blob'; //发送请求数据 xhr.send(paramData); //请求完成 xhr.onload = function (){ //当请求状态码为200时 if(this.status === 200){ //用blob对象接收返回的二进制数据 let blob = new Blob([this.response]) //创建<a>标签 let a = document.createElement('a') //此时blob暂存在内存中,传入url a.href = URL.createObjectURL(blob); //规定下载 a.setAttribute("download", "data.xls"); //点击 a.click(); //释放 URL.revokeObjectURL(a.href); } } }); /* 这个方法,后端接收不到传入数据,因此每次点击事件时总是导出全部数据。 若传入数据就是js对象格式时,亦然。 若传入数据是json格式时, paramData = JSON.stringify(paramData); 亦然。 望指导。 */
方法三
使用原生jQuery
创建POST请求,传入数据,将得到的数据流用Blob(Binary Large Objects)处理。这个方法本人实现亦无果。
//导出按钮点击事件 $('#export').click(function(){ //获取查询条件value //构造键值对 var paramData = {key1:value1,key2:value2,key3:value3,key4:value4}; $.ajax({ type: "POST", url: '/ba/baRecord/exportExcel', /* jQuery内置会判断传入数据类型,当我们未定义content-type时,默认使用string格式, 如果传入的paramData不是string格式,会调用jQuery.param()方法,将其格式化。 */ data: paramData, //预设响应数据为binary dataType: 'binary', //规定响应类型为blob !important xhrFields: { responseType: "blob" }, success: function (res) { // res 为二进制流 //用blob对象接收返回的二进制数据 let blob = new Blob([res]) //创建<a>标签 let a = document.createElement('a') //此时blob暂存在内存中,传入url a.href = URL.createObjectURL(blob); //规定下载 a.setAttribute("download", "data.xls"); //点击 a.click(); //释放 URL.revokeObjectURL(a.href); } }); }); /* 这个方法后台能接收到数据,请求状态码200,浏览器响应结果预览为乱码。但是不会转到下载,即未进行 到success方法。 测试 complete: function (XMLHttpRequest, status) { console.log(XMLHttpRequest, status); } 返回error 无果 */ //遂使用 statusCode: { 200:function (res) { let blob = new Blob([res]) let a = document.createElement('a') a.href = URL.createObjectURL(blob); a.setAttribute("download", "data.xls"); a.click(); URL.revokeObjectURL(a.href); } } /* 亦无果,望指导 */