在开发中导出功能十分常见,而导出的文件虽然前端也可以灵活设置名字,但有时候也可能需要使用后台下发文件名,下面就是通过截取响应头中的信息设置文件名
通过上图可知,后端下发的文件标题放在红框参数中,而绿框是需要截取出的完整数据
// 导出
const handleExport = async () => {
request(`/api/sino-app/org/Export`, {
method: 'GET',
responseType: 'blob',
//headers 可选,根据接口实际情况
headers: {
'Sino-Auth': `${getToken()}`,
},
params: {
month: time,
},
//如果需要原始响应,请设置为 true 并返回 { data, response }。因为后面需要获取响应头这里设置为true
getResponse: true,
})
.then((response) => {
const blobUrl = window.URL.createObjectURL(response.data);
const aElement = document.createElement('a');
const root = document.getElementById('root');
// 以下为重点部分,截取`attachment;filename*=utf-8''`后面的数据
const filename =
response.response?.headers
?.get('content-disposition')
?.split(`attachment;filename*=utf-8''`)[1] || 'XX统计表';
aElement.href = blobUrl; // 设置a标签路径
aElement.download = decodeURI(filename);
root?.append(aElement);
aElement.click();
window.URL.revokeObjectURL(blobUrl);
aElement.remove();
})
.catch((error) => {
console.log('文件下载失败', error);
message.error(`文件下载失败.`);
});
};
因本项目使用Ant Design Pro框架,在发送请求时使用umi-request封装的request方法,所以获取响应头需要配置getResponse: true;其他请求方式按具体情况操作,重点在于获取到响应头并对其进行截取