二进制 微课（前端处理二进制流数据–转下载）

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

导言

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