11

我正在使用来自角度材料https://material.angular.io/components/table/overview的这个示例创建一个角度表，无论如何以 excel 或 pdf 格式导出它？

4

4 回答 4

9

在你的表 component.ts

声明一个名为 renderedData: any;

然后在您的构造函数中订阅材料表中已更改的数据。我猜您正在使用可过滤表。

constructor(){
this.dataSource = new MatTableDataSource(TableData);
this.dataSource.connect().subscribe(d => this.renderedData = d);
}

npm install --save angular5-csv

在您的 HTML 中创建一个按钮 <button class="btn btn-primary" (click)="exportCsv()">Export to CSV</button>

最后，将更改的数据导出到 CSV

exportCsv(){
new Angular5Csv(this.renderedData,'Test Report');
}

可以在此处找到有关导出器的更多详细信息：https ://www.npmjs.com/package/angular5-csv

我希望这有帮助 ：）

于 2018-09-06T15:09:42.533 回答
7

您可以使用mat-table-exporter包以 excel、csv、json 或 txt 格式导出。它也支持分页表。

Stackblitz 演示： https ://stackblitz.com/edit/mte-demo

于 2019-09-11T20:19:42.577 回答
1

您可以将 ngx-csv 用于 Angular 7 工作正常“ https://www.npmjs.com/package/ngx-csv ”。使用“this.dataSource.connect().subscribe(data=>this.renderedData=data);”从表中获取数据 然后使用导出功能。

于 2019-02-26T09:47:24.857 回答
1

您可以使用 mat-table-exporter。要在打字稿代码中访问“导出”方法：

@ViewChild("exporter") exporter! : MatTableExporterDirective;

<table mat-table matTableExporter [dataSource]="dataSource" 
                               #exporter="matTableExporter">
于 2021-02-10T14:25:53.173 回答