1.需要传入token值,后端返回二进制流文件,前端可以利用axios,通过Blob转换excel文件流
const axiosDownloadFile = (url: string, data: PlainObject = {}) => {
axios({
url: url,
headers: {
'content-type': 'application/json; charset=utf-8',
'Access-token': sessionStorage.getItem('token') || ''
},
responseType: 'blob', // 设置请求数据格式
params: { ...data }
}).then((res: any) => {
// 创建一个类文件对象:Blob对象表示一个不可变的、原始数据的类文件对象
let blob = new Blob([res.data], { type: 'application/vnd.ms-excel;charset=utf-8' });
// 设置文件名称,decodeURI:可以对后端使用encodeURI() 函数编码过的 URI 进行解码。encodeURI() 是后端为了解决中文乱码问题
let fileName = decodeURI(res.headers['content-disposition']);
// 根据后端返回的数据处理文件名称
if (fileName) {
fileName = fileName.substring(fileName.indexOf('=') + 1);
}
const a = document.createElement('a')// 创建一个a标签
a.download = fileName;// 设置a标签的下载属性
a.style.display = 'none';// 将a标签设置为隐藏
a.href = URL.createObjectURL(blob);// 把之前处理好的地址赋给a标签的href
document.body.appendChild(a);// 将a标签添加到body中
a.click();// 执行a标签的点击方法
URL.revokeObjectURL(a.href) // 下载完成释放URL 对象
document.body.removeChild(a)// 移除a标签
})
};
axiosDownloadFile(url, data)
2.不需要token值直接获取
const download = (url: string, data: PlainObject = {}, method?: 'get' | 'post') => {
const divElement = document.getElementById('downloadBox') as HTMLElement;
ReactDOM.render(
<form action={`${url}`} method={method || 'post'} >
{Object.keys(data).map((item, index) => (
<input key={index} name={item} type="text" defaultValue={data[item]} />
))}
</form>,
divElement
);
// eslint-disable-next-line react/no-find-dom-node
const divNode = ReactDOM.findDOMNode(divElement) as HTMLElement;
divNode.querySelector('form')?.submit();
ReactDOM.unmountComponentAtNode(divElement);
};
download(url, data)
3. 后端直接返回下载excel的地址url
window.location.href = url
完结,撒花✿✿ヽ(°▽°)ノ✿ 如果大家有其他方法可以写在评论区