angular6 将表格的JSON数据导出为excel

　　前言：

　　项目中遇到一个将表格数据输出为excel文件的需求，本需求只是简单地将简单表格的数据输出到excel，并没有涉及表格样式的复杂处理。

1、安装依赖环境　　

npm install file-saver --save
npm install @types/file-saver --save-dev
npm install xlsx --save

2、html 导出按钮

<button type="button" class="btn btn-sm btn-success" (click)="exportTable()">导出</button>

3、TS 文件

import * as FileSaver from 'file-saver';
import * as XLSX from 'xlsx';

......

jsonData: any = [
    {
      "姓名": "张三",
      "工號": "22",
      "英文名": "zhangsan",
      "部门": "技术部",
      "性别": "男",
      "手机": "15177641999",
      "个人邮箱": "610336688@qq.com"
    }, {
      "姓名": "李四",
      "工號": "33",
      "英文名": "李四",
      "部门": "人事部",
      "性别": "女",
      "手机": "15177641988",
      "个人邮箱": "978336688@qq.com"
    }];

exportTable() {
    const exportItem = this.jsonData;
  
    const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(exportItem);
    const workbook: XLSX.WorkBook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };
    const excelBuffer: any = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
    this.saveAsExcelFile(excelBuffer, 'report');
}

private saveAsExcelFile(buffer: any, fileName: string) {
  const data: Blob = new Blob([buffer], {
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'
  });
  FileSaver.saveAs(data, fileName + '.xlsx');
}

.......

4、输出结果