vue+axios导出文件(excel)

最新推荐文章于 2024-06-24 17:12:04 发布

qq_42151769

最新推荐文章于 2024-06-24 17:12:04 发布

阅读量2.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue+axios导出excel

转载请注明原创

本文链接：https://blog.youkuaiyun.com/qq_42151769/article/details/91397671

本文介绍如何在Vue项目中结合Axios库，通过设置responseType为blob或arraybuffer来处理文件导出，特别是Excel文件。通过在Axios拦截器中处理响应数据，实现点击下载的功能。

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

1.请求类型需要设置为: responseType:blob或者为arraybuffer,这个默认是json

export function exportExcel(params) {
  return request({
    url: process.env.ADMIN_API + '/api/admin/token/blog/export',
    method:'post',
    data:params,
    responseType: 'blob',
  });

2.对响应数据做处理,我这里直接在拦截器中处理了: 这样就只要是blob或者arraybuffer类型的就直接下载了

service.interceptors.response.use(
  //对响应数据做点什么
  response => {
     /**
      * code为非20000是抛错 可结合自己业务进行修改
      */
    const res = response.data;
    if (res.code === 200) {
      return response.data
    }
    //blob类型为文件下载对象，不论是什么请求方式，直接返回文件流数据
    if(response.config.responseType === 'blob' || response.config.responseType === 'arraybuffer'){  //下载excel类型
       let blob = new Blob([res], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'}); //application/vnd.openxmlformats-officedocument.spreadsheetml.sheet这里表示xlsx类型
      let downloadElement = document.c