ToB企服应用市场:ToB评测及商务社交产业平台

标题: vue3+axios哀求导出excel文件 [打印本页]

---

作者: 宁睿    时间: 2024-8-6 22:34
标题: vue3+axios哀求导出excel文件
 在Vue 3中使用axios哀求导出Excel文件，可以发送一个GET或POST哀求，并设置响应范例为blob或arraybuffer，然后使用new Blob()构造函数创建一个二进制文件，最后使用URL.createObjectURL()生成一个可以下载的链接。
先看代码

1. import axios from 'axios';
3. // 导出Excel文件的函数
4. export function exportExcel() {
5.   const url = '/api/export'; // 替换为你的接口地址
6.   axios({
7.     method: 'get',
8.     url: url,
9.     responseType: 'blob', // 重要！设置响应类型为blob或arraybuffer
10.   })
11.   .then(response => {
12.     // 创建一个新的Blob对象，设置文件类型
13. //response.data是后端返回的文件流数据，如果response是文件流就直接用response，根据后端返回实际情况而定
14.     const blob = new Blob([response.data], { type: 'application/vnd.ms-excel;charset=UTF-8' });
15.     // 创建一个指向新Blob对象的URL
16.     const url = window.URL.createObjectURL(blob);
17.     // 创建一个a标签用于下载
18.     const link = document.createElement('a');
19.     link.href = url;
20.     link.setAttribute('download', 'export.xls'); // 设置下载文件名
21.     document.body.appendChild(link);
22.     // 触发下载
23.     link.click();
24.     // 清理并移除元素和对象URL
25.     document.body.removeChild(link);
26.     window.URL.revokeObjectURL(url);
27.   })
28.   .catch(error => {
29.     console.error('导出Excel失败:', error);
30.   });
31. }

复制代码

后端返回的数据是一个二进制数据流，可以console.log(response)打印一下响应数据，查看数据是不是Blob范例，如果不是的话可能会出现乱码、undefined等环境
以arraybuffer范例为准的post哀求，以下是后端返回数据截图，这里response的值是文件流
后端返回的数据

 响应拦截器获取到的数据

 打印的response数据

 如果前端得到的数据布局跟上面截图一样，大概是没有问题的，如果出现中文乱码、undefined等环境，可以检查一下是否在哀求时设置了响应范例，blob和arraybuffer还是有区别的，blob不可就试试arraybuffer

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4