【vue】下载导出excel

下载导出excel

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

遇见的问题

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

观察报错

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

问题解决

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

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

所以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;
  }
};
1
2
3
4
5
6
7
8
9
10
11

知道原因了，就去解决问题。
解决方案两种
第一种，把统一封装的增加一个参数，就返回原始数据即可。这里不具体写了。
第二种，经过度娘，发现了一个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');
    });
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

这里有个点需要注意的，就是那个body，必须stringify才能被后台接口接收到，否则后台拿到的就是[Object object]

结语

如果哪位大佬发现了解释的不对的，还望不吝赐教。十分感谢