vue3+axios哀求导出excel文件
在Vue 3中使用axios哀求导出Excel文件，可以发送一个GET或POST哀求，并设置响应范例为blob或arraybuffer，然后使用new Blob()构造函数创建一个二进制文件，最后使用URL.createObjectURL()生成一个可以下载的链接。先看代码
import axios from 'axios';
// 导出Excel文件的函数
export function exportExcel() {
const url = '/api/export'; // 替换为你的接口地址
axios({
method: 'get',
url: url,
responseType: 'blob', // 重要！设置响应类型为blob或arraybuffer
})
.then(response => {
// 创建一个新的Blob对象，设置文件类型
//response.data是后端返回的文件流数据，如果response是文件流就直接用response，根据后端返回实际情况而定
const blob = new Blob(, { type: 'application/vnd.ms-excel;charset=UTF-8' });
// 创建一个指向新Blob对象的URL
const url = window.URL.createObjectURL(blob);
// 创建一个a标签用于下载
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'export.xls'); // 设置下载文件名
document.body.appendChild(link);
// 触发下载
link.click();
// 清理并移除元素和对象URL
document.body.removeChild(link);
window.URL.revokeObjectURL(url);
})
.catch(error => {
console.error('导出Excel失败:', error);
});
} 后端返回的数据是一个二进制数据流，可以console.log(response)打印一下响应数据，查看数据是不是Blob范例，如果不是的话可能会出现乱码、undefined等环境
以arraybuffer范例为准的post哀求，以下是后端返回数据截图，这里response的值是文件流
后端返回的数据
https://i-blog.csdnimg.cn/direct/18e99545074f4f2d8c890de4ca0f5a56.jpeg
响应拦截器获取到的数据
https://i-blog.csdnimg.cn/direct/e7ae8a3331a04b608a59328a5486576a.png
打印的response数据
https://i-blog.csdnimg.cn/direct/12ffa9e641ae4fccb338656a1ba10999.jpeg
如果前端得到的数据布局跟上面截图一样，大概是没有问题的，如果出现中文乱码、undefined等环境，可以检查一下是否在哀求时设置了响应范例，blob和arraybuffer还是有区别的，blob不可就试试arraybuffer
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]