十一国庆节过完了，也该收心了。西安的天气真的是每到假期就阴雨绵绵，国庆7天，下了5天的雨，我滴个乖乖。我哪里也没去成，就在市里面溜达。听说开了个城市生态公园，带娃去看了看。

看起来还不错，主要是距离住的地方近，大概十分钟的车程。

今天主要是要说一下Kendo Grid Excel导出的，首先我们需要导入一些包来支持Excel的导出。

import { ExcelExportModule } from '@progress/kendo-angular-excel-export';
import { GridModule, ExcelModule } from '@progress/kendo-angular-grid';

一个是Excel Module，一个是Excel Export Module，需要将这两个module导入我们的app.module中。

接下来，就是参照KendoGrid 控件的API去导出Excel，我们先来一个简单的。

<kendo-grid [data]="gridView"
                        [height]="650"
                        [resizable]="true"
                        [pageSize]="gridOption.pageSize"
                        [pageable]="{
                          buttonCount: 10,
                          pageSizes: true
                        }"
                        (pageChange)="pageChange($event)"
                        [skip]="gridOption.skip"
                        [sortable]="{allowUnsort:false}">
              <kendo-grid-column field="UserNo" title="用户名"></kendo-grid-column>
              <kendo-grid-column field="Name" title="姓名"></kendo-grid-column>
              <kendo-grid-column field="Sex" title="性别">
                <ng-template kendoGridCellTemplate let-dataItem>
                  <span>{{dataItem.Sex == 1 ? "男" : "女"}}</span>
                </ng-template>
              </kendo-grid-column>
              <kendo-grid-column field="Amount" title="余额">
                <ng-template kendoGridCellTemplate let-dataItem>
                  <span amount-highlight [amount]="dataItem.Amount">{{dataItem.Amount}}</span>
                </ng-template>
              </kendo-grid-column>
              <kendo-grid-column field="ParentCustomerName" title="返利">
                <ng-template kendoGridCellTemplate let-dataItem>
                  <span>{{!dataItem.ParentCustomerName? "N/A" : dataItem.ParentCustomerName}}</span>
                </ng-template>
              </kendo-grid-column>
              <kendo-grid-column field="InDate" title="注册日期">
                <ng-template kendoGridCellTemplate let-dataItem>
                  <span>{{dataItem.InDate | date : "yyyy-MM-dd HH:mm:ss"}}</span>
                </ng-template>
              </kendo-grid-column>
              <kendo-grid-column>
                <ng-template kendoGridCellTemplate let-dataItem>
                  <button class="k-button" type="button" (click)="showRechage(dataItem)">充值</button>
                  <button class="k-button" type="button"
                          [operationConfirm]="deleteCustomer"
                          [confirmMessage]="deleteConfirmMsg"
                          [param]="dataItem.ID">
                    删除
                  </button>
                </ng-template>
              </kendo-grid-column>
              <ng-template kendoGridToolbarTemplate>
                <button type="button" kendoGridExcelCommand icon="file-excel">导出到Excel</button>
              </ng-template>
              <kendo-grid-excel fileName="Customer.xlsx">
              </kendo-grid-excel>
            </kendo-grid>

这是一个Grid，需要导出功能的时候，我们只需要加入指令kendoGridExcelCommand和Kendo-grid-excel即可。看一下效果

点击导出到Excel，导出的Excel如下。

虽然导出了Excel，但是有些细节还是不尽如人意，比如说性别没有转成汉字，注册日期的格式。接下来我们就处理一下这个问题，其实查阅API我们会发现Kendo Grid给我们提供了事件excelExport，我们在这个事件中可以作文章。

(excelExport)="onExcelExport($event)"
<kendo-grid-excel fileName="Customer.xlsx">
  <kendo-excelexport-column field="Name" title="姓名"></kendo-excelexport-column>
  <kendo-excelexport-column field="Sex" title="性别"></kendo-excelexport-column>
  <kendo-excelexport-column field="Amount" title="余额"></kendo-excelexport-column>
  <kendo-excelexport-column field="ParentCustomerName" title="返利"></kendo-excelexport-column>
  <kendo-excelexport-column field="InDate" title="注册日期"></kendo-excelexport-column>
</kendo-grid-excel>

我们在Grid部分注册一个excelExport事件，我们再看一下实现

onExcelExport(e: any): void {
  const rows = e.workbook.sheets[0].rows;
  rows[0].cells[1].hAlign = 'center';
  rows.forEach((row) => {
    if (row.type === 'data') {
      row.cells[1].value = row.cells[1].value == 1 ? '男' : '女';
      row.cells[2].color = row.cells[2].value >= 50 ? '#FF9900' : '#003399';

      row.cells[4].value = new Date(row.cells[4].value);
      row.cells[4].format = 'yyy-MM-dd HH:mm:ss';
    }
  });
}

循环行，格式化性别和金额，最终导出的Excel如下，还行吧，具体细节还是要查阅API：https://www.telerik.com/kendo-angular-ui/components/excelexport/api/WorkbookSheetRowCell/

如果我们要导出日期呢，需要做如下设置

row.cells[4].value = new Date(row.cells[4].value);
row.cells[4].format = 'yyy-MM-dd HH:mm:ss';

这个时候导出的日期才是我们想要的格式。