两个女孩子怎么做网站,专业的内蒙古网站建设,网站模板目录,做网站必须会编程吗下载导出excel
首先使用的tdesign框架#xff0c;要导出后端返回的数据流excel
遇见的问题
下载的文件#xff0c;里边的内容是undefined
观察报错
一看就知道并不是后端的报错#xff0c;后端不可能是undefined 在强烈的好奇心驱动下#xff0c;看了下接口#xff0…下载导出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);});
};这里有个点需要注意的就是那个body必须stringify才能被后台接口接收到否则后台拿到的就是[Object object]
结语
如果哪位大佬发现了解释的不对的还望不吝赐教。十分感谢
