博主在写一个前端导出功能,点击按钮,将文件下载到本地。后端返回的是文件流的格式,下面就是实现的方法,亲测可用哦~
1.js导出方法
handleExport = () => {
const req = new XMLHttpRequest();
req.open('POST', url, true);
req.responseType = 'blob';
req.setRequestHeader('Content-Type', 'application/json');
req.onload = () => {
const data = req.response;
const a = document.createElement('a');
const blob = new Blob([data],{type:"application/octet-stream"});
const blobUrl = window.URL.createObjectURL(blob);
this.download(blobUrl) ;
};
req.send('');
};
download = (blobUrl) => {
const a = document.createElement('a');
a.style.display = 'none';
a.download = 'xxx.xls'; //文件名
a.href = blobUrl;
a.click();
// document.body.removeChild(a);
}
2.HTML
<Button type="primary" onClick={() => this.handleExport()}>
导出
</Button>
<

本文详细介绍了一种在前端实现导出文件流的方法,通过使用XMLHttpRequest和Blob对象,能够将后端返回的文件流格式数据下载到本地。文中提供了具体的JavaScript代码示例,包括如何创建请求、设置响应类型、处理响应数据以及触发文件下载。

2268

被折叠的 条评论
为什么被折叠?



