前端处理二进制流数据--转下载
导言
因业务需要，实现分类导出功能。筛选导出一定条件的数据，后端处理成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);
}
}
/*
亦无果，望指导
*/
内容来源于网络如有侵权请私信删除
文章来源: 博客园
- 还没有人评论，欢迎说说您的想法！
客服
