项目开发中,有时候会碰到导出功能的开发,对于请求参数中有特殊符号的情况,可以通过encode转码或者post请求的方式来解决,这里写一个post方法实现的demo,大家可以根据自己的功能业务处理进行调整。
// 用于解析blob内容为json,针对导出报错响应json错误信息的情况
const reader = new FileReader();
reader.onload = function() {
const jsonData = JSON.parse(reader.result);
console.log(jsonData);
// TODO deal biz json
};
// 导出方法调用
function exportData() {
// 请求参数对象
const data = {
k:1,
timeValueStart:'2024-01-01',
timeValueEnd:'2024-01-08'
};
// 接口请求地址
let reqApiUrl = 'https://api.yourdomain.com/api/export/data';
// 下面的cnToken为接口的签名认证信息自定义请求头信息,可选
fetch(reqApiUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'cnToken': '111111111111111111111111'
},
body: JSON.stringify(data)
})
.then(response => {
// 这里获取响应头信息中的Content-Disposition,这个信息时在服务端约定设置文件名的头信息,例如:
// resp.setHeader("Content-Disposition", "attachment;filename=aaaaaa.xlsx");
let cnHeaderFileName = response.headers.get('Content-Disposition');
// 下面设置blob对象和fileName
let result = {
fileName: null,
blob: response.blob()
};
console.log(cnHeaderFileName);
if(cnHeaderFileName) {
result.fileName = cnHeaderFileName.split(";filename=")[1];
}
return result;
})
.then(data => {
// 判断是否为文件类型,进行下载处理还是提示信息处理
let fileName = data.fileName;
let blob = data.blob;
if(blob.type == 'application/json') {
reader.readAsText(blob);
} else {
console.log(fileName);
const url = window.URL.createObjectURL(new Blob([blob]));
const a = document.createElement('a');
a.href = url;
a.download = fileName || 'exported_data.xlsx';
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
}
});
}
// 导出方法调用
exportData();
标签:const,导出,fileName,json,let,blob,post,js,data
From: https://blog.51cto.com/u_2870645/9127210