适用于发送请求直接返回文件使用
1. 需求 单击此按钮下载文件 , 需要携带请求头
2. 代码实现
Html部分
<a-button style="color: #033aff" @click="downLoadTemplate">下载模板</a-button>
<a href=""></a>
JavaScript部分
使用axios请求文件下载地址,我这里配置的baseurl为 api 服务器会自动代理
运维部署到服务器端的baseurl也是 api , 会使用nginx进行代理
const downLoadTemplate = () => {
let userTokenStr = localStorage.getItem('usertoken') || '';
axios
.get(`/api/account/${sRValue.value}/template/?fmt=${fmt.value}`, {
responseType: 'blob',
// 请求头添加token
headers: { Authorization: `Bearer ${userTokenStr}` }
})
.then((res) => {
if (res.status === 200) {
var elink = document.createElement('a');
// 使用后端提供的文件名 命名
const fileName = res.headers['content-disposition'].split('=')[1];
elink.style.display = 'none';
// 文件下载地址赋值
elink.href = window.URL.createObjectURL(res.data);
let str = sRValue.value + fileName;
str = str.substring(0, str.length - 1);
// 自定义文件名
elink.download = str;
// 调用a标签单击事件进行下载文件
elink.click();
message.success('文件导出成功');
}
})
.catch((err) => {
console.log(err, '打印错误信息');
message.error(`数据导出失败,${err.message}`);
});
};
最终实现效果 , 单机按钮下载文件