实现效果导出表格数据时，通常有两种情况：页面列表数据导出接口返回数据导出这里主要介绍接口返回数据导出，页面列表数据导出请看另一篇文章：vue3+element表单数据导出接口返回数据导出，通常需要请求后端接口获取数据。接口返回的数据基本都是乱码，需要先对乱码数据进行处理，否则会损坏导出的文件。看到返回的信息如下，tabledata基本上我已经拿到了，现在只需要做一些数据处理就可以导出table了。解决步骤拆解：Step1:Decoding在请求接口的位置添加{responseType:'blob'}对信息进行转码。这里有两种写法：写法一：//exportexportfunctionuserTable(params){returnrequest({url:'/users/table',method:'get',params,responseType:'blob'//添加blob解决乱码，或者arraybuffer})}写法二：exportconstuserTable=(params)=>axios.get('/users/table',{params},{responseType:'blob'})//添加请求后一行{responseType:'blob'}//or{responseType:'arraybuffer'}第二步：请求数据//exportconstgetTable=async()=>{//请求导出接口获取返回的数据通过后端letlist=awaitgetTableInfo(PageInfo);控制台日志（列表）}；这里得到的返回结果已经编译成功，打印结果如图：Step3:exporttableStep1配置完成后可以直接复制到这里，替换请求的接口即可//export完整语法constgetTable=async()=>{//request导出接口获取后端返回的数据letlist=awaitgetTableInfo(PageInfo);//content=export返回的数据letcontent=list;letdata=newBlob([content],{type:"application/vnd.ms-excel;charset=utf-8"});让downloadUrl=window.URL.createObjectURL(data);让anchor=document.createElement("a");anchor.href=downloadUrl;anchor.download="表名.xlsx";//表名.文件类型anchor.click();窗户。URL.revokeObjectURL(列表);//剔除请求接口返回的列表数据};};
