随笔- 14  文章- 0  评论- 0  阅读- 10151 

一、通过后端返回数据,前端自行创建表格导出:

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)    
 
 posted on   久闻  阅读(742)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
点击右上角即可分享
微信分享提示