实现成果

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

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

这里次要介绍接口返回数据导出，对于页面的列表数据导出，请看另一篇：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(list);  // 打消申请接口返回的list数据  };};