async handleExport() {
const newRow = JSON.parse(JSON.stringify(this.form));
delete newRow.creationDate;
const params = {
...newRow,
startTime: dateStart ? dateStart.getTime() : "",
endTime: dateEnd ? dateEnd.getTime() : "",
pageIndex: this.datas.page.pageIndex,
pageSize: this.datas.page.pageSize,
};
// 法1,直接发送接口获取base64;格式数据
this.ajax({
url: 'xxx/xxx',
data: params
})
var a = document.createElement("a");
a.download = "冻结日志信息.xlsx";
a.href = 'data:;base64,' + ret.data;
$("body").append(a); // 修复firefox中无法触发click
a.click();
$(a).remove();
// 法二:解析后端返回blob数据流,再新建a标签进行展示
var url = "/xxx/downloadSupremeFreezeRecords";
var xhr = new XMLHttpRequest();
xhr.open("post", url, true); // 也可以使用POST方式,根据接口
xhr.setRequestHeader("Content-Type", "application/json");
xhr.responseType = "blob"; // 返回类型blob
// 定义请求完成的处理函数,请求前也可以增加加载框/禁用下载按钮逻辑
xhr.onload = function () {
// 请求完成
if (this.status === 200) {
// 返回200
var blob = this.response;
var reader = new FileReader();
reader.readAsDataURL(blob); // 转换为base64,可以直接放入a表情href
reader.onload = function (e) {
console.log(e, this.response)
// 转换完成,创建一个a标签用于下载
var a = document.createElement("a");
a.download = "data.xlsx";
a.href = e.target.result;
$("body").append(a); // 修复firefox中无法触发click
a.click();
$(a).remove();
};
}
};
// 发送ajax请求,传参
xhr.send(JSON.stringify(params));
// 法三:使用post请求发送接口请求参数,缺点:传参格式Content-Type只能为x-www-form-urlenode,不能修改为application/json;
const form = document.createElement("form");
form.setAttribute("style", "display: none");
form.setAttribute("method", "post");
// form.setAttribute('target', '_blank'); // 打开新标签页
form.enctype = 'multipart/form-data' // 文件形式,查百度,只有三种格式,其中没有application/json;
form.setAttribute(
"action",
"/xxx/downloadSupremeFreezeRecords"
);
document.body.appendChild(form);
const newRow = JSON.parse(JSON.stringify(this.form));
delete newRow.creationDate;
const params = {
...newRow,
startTime: dateStart ? dateStart.getTime() : "",
endTime: dateEnd ? dateEnd.getTime() : "",
pageIndex: this.datas.page.pageIndex,
pageSize: this.datas.page.pageSize,
};
for (const x in params) {
const input = document.createElement("input");
input.setAttribute("type", "hidden");
input.name = x;
input.value = params[x];
form.appendChild(input);
}
form.submit();
},
法一接收数据:是base64格式的,用a标签的话需要自行加上数据格式和base64;
a.href = ‘data:;base64,’ + ret.data;
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