【vue】下载导出excel

news/2024/10/18 5:37:50/

下载导出excel

首先使用的tdesign框架，要导出后端返回的数据流excel

遇见的问题

下载的文件，里边的内容是undefined

观察报错

一看就知道并不是后端的报错，后端不可能是undefined
在强烈的好奇心驱动下，看了下接口，使用apifox调用后，返回的是一个文件流，也是个正常的，至少是有自定义的标题的。所以问题直指前端。

问题解决

经过查看前端代码发现，前端代码如下
这里输出了data，但是拿到的是undefined，所以导致下载的有问题了。
这里的问题是自己框架封装的问题。因为统一的返回格式是

{code:0, data:xxx, msg:''}

所以post请求做了一次封装，业务方调用的时候，如果code是0，则直接把data返回，并不返回code和msg。
但是因为接口返回的是在请求的response里写的流，所以导致这里的data是undefined。

const handleExport = async () => {try {// 发起导出exportLoading.value = true;const data = await api.exportdeleteCrew({ idLongList: exportIds.value });console.log(data);download.excel(data, 'xxx.xls');} finally {exportLoading.value = false;}
};

知道原因了，就去解决问题。
解决方案两种
第一种，把统一封装的增加一个参数，就返回原始数据即可。这里不具体写了。
第二种，经过度娘，发现了一个fetch的东西。就是我想要的按照文件流来下载
talk is cheap, show me the code

const handleExport = (url) => {fetch(url, {method: 'POST',headers: {Authorization: 'Bearer xxx','Tenant-Id': 'xxx','Content-Type': 'application/json',},body: JSON.stringify({ idLongList: [] }),}).then((res) => res.blob()).then((data) => {const blobUrl = window.URL.createObjectURL(data);api.downloadTest(blobUrl, 'test.xls');});
};