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",
      "個人郵箱": "[e-mail]"
    }, {
      "姓名": "李四",
      "工號": "33",
      "英文名": "李四",
      "部門": "人事部",
      "性別": "女",
      "手機": "15177641988",
      "個人郵箱": "[e-mail]"
    }];

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、輸出結果