前端处理二进制流数据–转下载

  • 前端处理二进制流数据–转下载已关闭评论
  • 165 次浏览
  • A+
所属分类:Web前端
摘要

​ 因业务需要,实现分类导出功能。筛选导出一定条件的数据,后端处理成Excle数据流,前端实现导出下载。


前端处理二进制流数据--转下载


导言

​ 因业务需要,实现分类导出功能。筛选导出一定条件的数据,后端处理成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);     } } /* 	亦无果,望指导 */