通过前端导出excel表格

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

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 2022-08-10 10:17  久闻  阅读(767)  评论(0)    收藏  举报