首先封装接口,此接口需要传Excel目标数据中的主键id,注意要加上responseType: 'blob'
import request from '@/utils/request';
const prefix = xxxxx + '/test';
export async function exportExcel(id: any) {
return request(prefix + '/export-excel/' + id,{
method: 'GET',
responseType: 'blob'
})
}
JS部分(如果后端返回文件流,以下代码基本通用,区别在接口名、传值和定义文件名称)
import { exportExcel } from '@/services' //引入接口
const getExcel = async (id: any) => {
// 调接口,传id,返回文件流
const res = await exportExcel(id);
// 将文件流转成Blob格式,类型为xlsx,若不确定格式,type可改为'application/octet-stream'
const blob = new Blob([res], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
});
console.log(blob, 'blobv');
const url = window.URL.createObjectURL(blob);
// 创建一个 a 标签并设置其属性
const link = document.createElement('a');
link.href = url;
link.download = 'ExcelName.xlsx';
// 模拟用户点击下载链接
document.body.appendChild(link);
link.click();
// 移除链接
document.body.removeChild(link);
// 释放资源
window.URL.revokeObjectURL(url);
};
最后,给按钮绑定点击事件,传主键id,即可实现自动下载Excel文件
<Button onClick={() => getExcel(data.id)}>
导出
</Button>
效果图: