前言: 从后端获取表格等文件流并在前端触发下载的功能是个常用功能,方法很多,这里我们采用Blob 对象和 <a>
标签来实现文件下载。
我这里实现的是列表数据可选并导出,选择需要导出的字段,发送给后端,请求成功后后端返回文件流,前端通过a链接下载,导出成功,文件可查看。
1.重要部分代码如下
// 触发请求,可以是按钮,也可以在当前界面直接调用接口
exprotData(){
// 数据
let data = {
};
// 接口
apijs.exportData(data).then(res => {
console.log("execl",res.data);
this.handleDownloadFile(res.data,'名称.xlsx')
})
},
// 处理文件并下载
handleDownloadFile(){
const blob = new Blob([file],{
type: "application/vnd.ms-excel;charset=UTF-8"
});
const a = document.createElement("a");
const objectUrl = window.URL.createObjectURL(blob);
a.setAttribute("href",objectUrl);
a.setAttribute("download",fileName);
a.click();
URL.revokeObjectURL(a.href);
},
接口指定响应的类型为 arraybuffer
。arraybuffer
是一种用于表示通用的、固定长度的原始二进制数据缓冲区的方式。
期望以 arraybuffer
形式接收响应数据。在处理文件下载(如 Excel 文件、PDF 文件等)时非常有用,因为文件内容通常以二进制形式传输。
//接口
getData(data){
return axiosApi(
{
method: "POST",
url: `接口地址`,
data,
responseType: "arraybuffer"
}
)
}
2.文件处理代码解析
// 处理文件并下载
handleDownloadFile(){
const blob = new Blob([file],{
type: "application/vnd.ms-excel;charset=UTF-8"
});
const a = document.createElement("a");
const objectUrl = window.URL.createObjectURL(blob);
a.setAttribute("href",objectUrl);
a.setAttribute("download",fileName);
a.click();
URL.revokeObjectURL(a.href);
},
handleDownloadFile
函数来处理下载文件,它接受两个参数 file
和 fileName
,分别表示要下载的文件内容和文件名。
首先,代码创建了一个 Blob 对象,Blob 是一种表示二进制数据的对象。Blob([file], { type: "application/vnd.ms-excel;charset=UTF-8" })
创建了一个包含 file
内容的 Blob 对象,并指定了 MIME 类型为 "application/vnd.ms-excel;charset=UTF-8"。
创建了一个 <a>
标签,使用 window.URL.createObjectURL(blob)
生成了一个 URL,该 URL 指向了上面创建的 Blob 对象。
设置了 <a>
标签的 href
属性为上述生成的 URL,以及 download
属性为传入的 fileName
,这样就指定了文件下载的链接和文件名。
调用了 <a>
标签的 click
方法,实现了模拟用户点击下载链接的操作。
调用 URL.revokeObjectURL(a.href)
来释放之前创建的 URL 对象,以便释放内存和避免内存泄漏。
3.实现效果
控制台打印出了接收的数据,接收到了文件流。
直接下载完成
打开查看表格文件
若文章对你有帮助,点个赞吧!