Angular+FileSaver+XLSX实现导出

一、安装相关插件

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

二、写一个导出的service供使用

import { Injectable } from '@angular/core';
import * as FileSaver from 'file-saver';
import * as XLSX from 'xlsx';
@Injectable({
  providedIn: 'root'
})
export class Export {

  /**
   *  將Json數據導出為Excel文件
   * @param json_data 數據內容
   * @param excelName 文件名稱
   * @param header 表頭(可选)
   */
  downloadExcel(json_data: any, excelName: string,header?: string[]) {

    const ws = XLSX.utils.json_to_sheet(
      json_data, {
      header: header //設置表頭
    }
    )
    //创建一个workbook对象
    let wb = XLSX.utils.book_new()
    //把worksheet对象添加进workbook对象，第三个参数是excel中sheet的名字
    XLSX.utils.book_append_sheet(wb, ws, excelName)
    //接下来就是写入，下载导出
    let wb_out = XLSX.write(wb, { bookType: 'xlsx', type: 'array' })
    FileSaver.saveAs(new Blob([wb_out], { type: 'application/octet-stream' }), excelName + '.xlsx')
  }
  /**
   *  將表格導出為Excel文件
   * @param table 表格內容
   * @param fileName 文件名稱
   */
  exportExcelByTable(table: any,  fileName: string) {
    const ws: XLSX.WorkSheet = XLSX.utils.table_to_sheet(table);
    const workbook: XLSX.WorkBook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, ws, 'ClassDataExport');
    const excelBuffer: any = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
    const data: Blob = new Blob([excelBuffer], {
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'
    });
    FileSaver.saveAs(data, fileName+ '.xlsx');
  }
}

三、component中使用

//依赖注入
constructor(private ex:Export,) { }

//方法一(根据表格数据导出Excel)

 @ViewChild('sortTable',{ read: ElementRef }) nzTable!:ElementRef;
 export(): void {
    let fileName = 'xxx明细' + Date.parse(new Date().toLocaleTimeString());//定義文件名
    //根据表格导出
    this.ex.exportExcelByTable(this.nzTable.nativeElement,fileName);
  }


//方法二(根据json数据导出Excel)
resultData = [
    {
      title: '标题',
      fieldName: 'TITLE'
    },
    {
      title: '号码',
      fieldName: 'NO'
    },
    {
      title: '日期',
      fieldName: 'DATE'
    },
  ];

export(): void {
    let fileName = 'xxx' + Date.parse(new Date().toLocaleTimeString());//定義文件名

    let export_json_data: any;
    //data是由接口返回的json数据；与展示数组resultData对比生成中文表头
    export_json_data=data.map((i: any) =>{
      let obj={};
      this.resultData.map((item: { fieldName: string; title: string })=>{
        obj[item.title]=i[item.fieldName];
      })
     return obj;
    })
    this.ex.downloadExcel(export_json_data, fileName);


  }

注：

在typescript中，可能会碰到元素隐式具有“any”类型，因为“string”类型的表达式不能用于索引类型“Object”。在类型“Object”上找不到“string”类型参数的索引签名问题。

要想解决这类问题，需要在tsconfig.json文件中配置："suppressImplicitAnyIndexErrors": true 就可以解决此类问题。