如何正确使用MatTableExporterModule将数据导出到excel？

Question

我正在

mat-table-exporter

中使用

Angular 9

npm 模块来导出 mat 表组件。

我可以使用

test

作为导出文件的名称正确导出它。

以前的工作代码：

<mat-table matTableExporter [dataSource]="dataSource" #exporter="matTableExporter">

<button mat-raised-button (click)="exporter.exportTable('csv', {fileName:'test',
   Props: {Author: 'myName'}})">
   Export
</button>

我还想在导出文件的名称中添加时间戳，我为其编写了以下代码：

新组件代码：

exportTable(): void {
  this.exporter.exportTable('csv', {
    filename: `test-${new Date().toISOString()}`,
    Props: { 
      Author: 'myName'
    }
  })
}

新的 HTML 代码：

<mat-table matTableExporter [dataSource]="dataSource" #exporter="matTableExporter">

<button mat-raised-button (click)="exportTable()">Export</button>

上面的代码抛出错误：

TS2552: Cannot find name 'exporter'. 

Answer 1

如果您希望

exporter

在组件中可用，则需要使用

ViewChild

，您的 html 代码将保持不变，但组件应更改为：

@ViewChild(MatTableExporterDirective, { static: true }) exporter: MatTableExporterDirective;
exportIt() {
  this.exporter.exportTable(ExportType.CSV, {
    fileName: "test",
    Props: {
      Author: "myName"
    }
  });
}

Answer 2

在 Angular 15 中有效 -

      @ViewChild("exporter") exporter! : MatTableExporterDirective;
  download() {
    console.log("Downloading");
  this.exporter.exportTable(ExportType.XLSX, {
    fileName: "all-results",
    Props: {
      Author: "college-app-user"
    }
  });
  
}

在 TS 文件中 -

import { ExportType, MatTableExporterDirective, MatTableExporterModule } from 'mat-table-exporter';

在 HTML 模板中 -

<mat-table matTableExporter [dataSource]="dataSource" #**exporter**="matTableExporter">