一、通过后端返回数据,前端自行创建表格导出:
1. 在前端HTML上绘制想要导出的表格(包含后端获取的数据)
<div class="exportExcel" id="exportOutTable" style="display:none">
<table></table>
</div>
2. 导出
let excelHtml: any = document.getElementById("exportOutTable")?.outerHTML;
let html =
"<html><head><meta charset='utf-8' /></head><body>" +
excelHtml +
"</body></html>";
let blob = new Blob([html], { type: "application/vnd.msexcel" });
if ((window.navigator as any).msSaveOrOpenBlob) {
(window.navigator as any).msSaveOrOpenBlob(blob, "表格名称.xls");
} else {
let a = document.createElement("a");
let url = window.URL.createObjectURL(blob);
a.href = url;
a.download = "表格名称.xls";
a.style.display = "none";
document.body.appendChild(a);
a.click();
a.remove();
window.URL.revokeObjectURL(url);
}
二、通过后端返回文档流,前端导出:
请求中需要添加
后端返回的数据流格式
const link = document.createElement('a')
let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
link.style.display = 'none'
link.href = URL.createObjectURL(blob)
link.download = 表格名称` //下载的文件名
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY