今天工作碰到一个需求,点击按钮导出excel,后端是直接返回的文件流,如下图:
方案一
直接用a标签来改造这个按钮,把下载地址放到href里,因为后端已经在响应头里设置了文件名和文件类型,点击按钮就能下载带有默认文件名的excel文件了。但是这个方案中,地址如果是动态的就不够灵活了。
方案二
按钮不变成a标签,在按钮的点击事件里处理
// 获取baseurl
click(){
const baseurl= `xxx`;
// 拼接上导出的地址,如果接口还需要其他参数,都可以直接拼接上
let url=`${baseurl}/xxx/export/${xxx}`
// 第二个参数'_self'表示在当前页下载,不打开新的页面
window.open(url,'_self')
}
方案三
直接处理文件流
axios({
method: '请求方法(get/post)',
url: '地址',
data: '请求参数',
responseType: 'blob' // 响应数据的类型要设置成blob,不然下载的文件打开会出错
}).then((res) => {
// 用blob存储二进制文件
const blob = new Blob([res.data], {
type: 'application/vnd.ms-excel', // 设置文件类型
});
// 创建一个临时的url指向blob对象
const objectUrl = window.URL.createObjectURL(blob);
// 创建url之后可以模拟对此文件对象的一系列操作,例如:预览、下载
const a = document.createElement('a');
a.setAttribute('href', objectUrl);
a.setAttribute('download', '文件名');
a.click();
// 5.释放这个临时的对象url
window.URL.revokeObjectURL(objectUrl);
}).catch(error => {
...
});