angular纯前端导出Excel 于2022年2月13日由城南蝈蝈发布

原文链接：这里

0.背景
一个空项目需要导出excel文件，以前都是后台直接导出，但是有的地方显示的数据可能牵扯到前端的一些计算，所以会用到前端导出。

本文用的是angular6.x+ng-zorro-antd，因为前端的HTML页面用的nz-table构建的，所以想直接用成型的组件。

我的前端HTML表格的代码如下，我想把这个表格用excel导出。

1.我们安装file-saver插件

npm install file-saver
或者
yarn add file-saver
2.然后，我们在刚才的nz-table中加入id，后面我们用DOM来获取这个id

<nz-table [nzData]=“listOfData” #taskTable id=“taskTable” >
3.我们再前端对应的ts文件中，加入导入

import { saveAs } from “file-saver”
4.我们写一个方法，来触发导出操作

exportExcel() {

  const blob = new Blob([document.getElementById('taskTable').innerHTML],{
    type:"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
  });
  saveAs(blob,"文件名.xls");

}
然后，我们用button或者其他方式触发这个exportExcel方法，就能导出excel了，亲测有效。

3.后续
上面的操作比较简单，导出很容易，但是有缺点。

①导出的表格没有边框

②会按照表格上的数据和显示样式导出，这样操作有什么问题呢？比如你们的表格第一列是checkBox那种选择框，或者你表格的最后一列是“编辑”、“新增”、“删除”之类的操作，那么都会把这些导出，实际上，这些东西不应该导出。

③未验证是否支持复杂表头的导出。

上述问题的解决办法在下一篇文章中介绍。