vue管理后台带token Excel导出

最新推荐文章于 2024-07-12 17:30:11 发布

原创最新推荐文章于 2024-07-12 17:30:11 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

技术专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍如何在Vue后台管理系统中实现带token的导出功能，重点讲解了使用fetch API进行POST请求的方法，并展示了如何设置responseType为'blob'以正确获取导出的Excel文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前做的导出都是不校验token的 a链接调用后台接口地址后边以get的方式携带参数就可以了；
今天做vue管理后台带token导出
vue后台管理系统 token封装在请求头里会在请求头里给后端发送
调用导出接口时需要加参数：responseType: ‘blob’（非常重要）
export const ExpotListStatisDetail = param => fetch({
url: ‘’, //你的请求地址
method: ‘post’,
data: param,
responseType: ‘blob’
})
调用接口后的页面返回处理：
// data是导出时携带的参数
interface(data).then(res => {
let a = document.createElement(‘a’);
// res返回结果
let blob = new Blob([res],{
type: ‘application/vnd.ms-excel;charset=utf-8’ // 这里放文件类型，后台返回的response会有这个文件类型，放进来就行
});
a.href = URL.createObjectURL(blob);
a.download = ’ 文件名 ’ // 指定的文件名
document.body.appendChild(a);
a.click()
}).catch(err => {
console.log(err);
});
以下附上参考链接：
https://www.jianshu.com/p/cb6925298a7c
https://blog.youkuaiyun.com/liujun03/article/details/84378942