angular6 導出Excel文件

一、安裝file-saver、@types/file-saver和xlsx

 

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

 

二、html文件加入導出按鈕

 

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

 

三、在component文件中加入以下代碼

 

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

......

exportTable() {
    const exportItem = this.item; //this.item是一個數組，包含須要導出的內容
  
    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 + '_' + moment().format('YYYYMMDDHHmmss') + '.xlsx');
}

.......