angular纯前端导出Excel

0.背景

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

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

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

<nz-card class="mt-md">
  <nz-table [nzData]="listOfData" #taskTable   >
    <thead>
      <tr>
        </th>
        <th nzWidth="100px">表头1</th>
        <th nzWidth="100px">表头2</th>
        <th nzWidth="100px">表头3</th>
        <th nzWidth="100px">表头4</th>
        <th nzWidth="100px">表头5</th>
        <th nzWidth="200px">表头6</th>
        <th nzWidth="150px">表头7</th>
        <th nzWidth="100px">表头8</th>
        <th nzWidth="100px">表头9</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of taskTable.data">
        <td nzShowCheckbox [(nzChecked)]="mapOfCheckedId[data.id]" (nzCheckedChange)="refreshStatus()" ></td>
        <td>{{ data.projectName }}</td>
        <td>{{ data.companyName }}</td>
        <td>{{ data.regionName }}</td>
        <td>{{ data.productionTime |date:"yyyy-MM-dd" }}</td>
        <td>{{ data.endTime |date:"yyyy-MM-dd" }}</td>
        <td>{{ data.energyConsumptionEquivalent }}</td>
        <td>{{ data.energyConsumptionEqual }}</td>
        <td>{{ data.industrialIntensity}}</td>
        <td>{{ data.state=='1'?'未提交':'已提交' }}</td>
      </tr>
    </tbody>
  </nz-table>
</nz-card>

2.方法

一共找到了两个方法，分两篇文章说，先说第一种，file-saver

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那种选择框，或者你表格的最后一列是“编辑”、“新增”、“删除”之类的操作，那么都会把这些导出，实际上，这些东西不应该导出。

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

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