调用后台接口实现Excel导出功能以及导出乱码问题解决

原创已于 2023-08-15 18:37:29 修改 · 4.1k 阅读

36 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言 #vue.js #react.js

于 2022-11-17 15:56:00 首次发布

JavaScript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何处理接口返回的数据并导出为Excel表格，重点讲解了解码乱码数据的方法及导出步骤。

实现效果

在这里插入图片描述

在导出表格数据的时候，通常分为两种情况

页面列表数据导出
接口返回数据导出

这里主要介绍接口返回数据导出，关于页面的列表数据导出，请看另一篇：vue3+element表格数据导出

接口返回数据导出，通常需要请求后端接口获取数据，接口返回的数据基本上是乱码的，需要先处理乱码的数据，否则导出来的文件是损坏的，如下
在这里插入图片描述
看到这种返回信息，表格数据基本上是已经拿到了，现在只需要做一下数据的处理即可导出表格。

解决方法步骤拆解：

步骤一：解码
在请求接口的位置添加 { responseType: 'blob' } 将信息转码，此处有两种写法：
写法1：

// 导出
export function userTable(params) {
    return request({
        url: '/users/table',
        method: 'get',
        params,
        responseType: 'blob'   // 添加 blob 解决乱码问题，或者 arraybuffer
    })
}

写法2：

export const userTable = (params) => axios.get('/users/table',{params},{ responseType: 'blob' })
// 在请求的后面加一行  { responseType: 'blob' }
// 或者   { responseType: 'arraybuffer' }

步骤二：请求数据

  // 导出  
const getTable = async () => {
   // 请求导出接口 获取到后端返回的数据
   let list = await getTableInfo(PageInfo);  
   console.log(list)
};

此处得到的返回结果已经成功编译，打印的结果如图所示：
在这里插入图片描述
步骤三：导出表格
步骤一配置完后这里可以直接复制，替换一下请求的接口即可

// 导出完整语法  
const getTable = async () => {
   // 请求导出接口 获取到后端返回的数据
   let list = await getTableInfo(PageInfo);  
    
   // content = 导出返回的数据
  let content = list;  
  let data = new Blob([content], {
    type: "application/vnd.ms-excel;charset=utf-8"
  });
  let downloadUrl = window.URL.createObjectURL(data);
  let anchor = document.createElement("a");
  anchor.href = downloadUrl;
  anchor.download = "表格名称.xlsx"; // 表格名称.文件类型
  anchor.click();
  window.URL.revokeObjectURL(anchor);  // 消除请求接口返回的数据
  };
};