文件下载-前端发请求后端返回二进制文件
1.前端发请求(axios为例)
request({
url: "/export",
method: 'post',
responseType: 'blob',
data: data
}).then((response) => {
debugger
if (response.type === 'application/json') {
alert("设置时间或当前时间暂无数据");
} else {
const blob = response;
const downloadLink = document.createElement('a');
downloadLink.href = window.URL.createObjectURL(blob);
downloadLink.download = fileName;
downloadLink.click();
window.URL.revokeObjectURL(downloadLink.href); // Clean up the URL object
}
}).catch((error) => {
console.error('请求失败:', error);
});
2.详细解释
2.1说明
说明:发送一个 POST 请求到 /export
接口,并处理响应内容,响应内容可能是一个二进制文件(blob)
。
2.2处理响应部分
.then((response) => {
debugger
if (response.type === 'application/json') {
alert("设置时间或当前时间暂无数据");
} else {
const blob = response;
const downloadLink = document.createElement('a');
downloadLink.href = window.URL.createObjectURL(blob);
downloadLink.download = fileName;
downloadLink.click();
window.URL.revokeObjectURL(downloadLink.href); // 清理URL对象
}
})
then
方法用来处理请求成功后的响应。response
是服务器返回的数据。debugger
会在开发者工具中暂停代码执行,便于调试。- 判断响应类型:
- 如果
response.type === 'application/json'
,说明服务器返回的是 JSON 数据(而不是文件)。此时,弹出一个提示框alert("设置时间或当前时间暂无数据")
,提示用户当前没有可下载的数据。 - 否则,表示服务器返回的是一个文件(二进制数据)。
- 如果
- 处理文件下载:
const blob = response;
将服务器返回的二进制数据赋值给blob
。document.createElement('a')
创建一个<a>
标签,用来触发文件下载。window.URL.createObjectURL(blob)
将blob
转换为一个 URL 资源。downloadLink.download = fileName;
设置下载文件的名称。downloadLink.click();
模拟点击<a>
标签,触发浏览器的下载动作。window.URL.revokeObjectURL(downloadLink.href);
在下载完成后,撤销该 URL,释放内存。
2.3 处理错误部分
.catch((error) => {
console.error('请求失败:', error);
});
3.总结
这段代码的主要功能是通过 POST 请求导出一个文件,处理服务器返回的文件数据或 JSON 数据。如果返回文件,则自动生成并下载;如果返回 JSON 数据,则提示用户没有数据。
原文地址:https://blog.csdn.net/m0_62785037/article/details/142025383
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.kler.cn/a/299571.html 如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.kler.cn/a/299571.html 如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!