首先,需要登录的时候把token塞入localStorage里面
js
localStorage.setItem('token', data.token);
再写一个公用方法来下载文件(基于ts)
逻辑就是先发一个请求,返回成功后,创建一个a标签,然后点击它
ts
// 下载文件
export const download = (link: string, filename: string) => {
const xhr = new XMLHttpRequest();
// POST请求,link,async(是否异步)
xhr.open("POST", link, true);
// //设置请求头参数的方式,如果没有可忽略此行代码
xhr.setRequestHeader("token", window?.localStorage?.getItem("token"));
// //设置响应类型为 blob
xhr.responseType = "blob";
// //关键部分
xhr.onload = function() {
// //如果请求执行成功
if (this.status === 200) {
const blob = this.response;
// 创建一个a标签
const a = document.createElement("a");
// blob.type = "application/octet-stream";
// 创键临时url对象
const url = window.URL.createObjectURL(new Blob([blob]));
a.href = url;
a.download = filename;
// 点击a标签
a.click();
// 释放之前创建的URL对象
window.URL.revokeObjectURL(link);
}
};
// //发送请求
xhr.send();
}
以下为测试(基于React)
ts
<Button
onClick={() => {
// currentPage、pageSize是分页信息,id、name是查询信息
const link = `localhost:8080/url?currentPage=${searchParams.currentPage}&pageSize=${searchParams.pageSize}${searchParams.id !== undefined ? `&id=${searchParams.id}` : ""}${searchParams.name !== undefined ? `&name=${searchParams.name}` : ""}`
download(link, "信息.xlsx")
}}
key="download"
target='_blank'
>
<CloudDownloadOutlined /> 导出本页
</Button>