如何将Angular Material Table导出为excel或pdf或csv

Question

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

Answer 1

在你的表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

我希望这有帮助 :)

塞尔吉在所有方面都不能同意你的意见。创建 npm 包的人花时间做某事，然后与世界分享。你似乎在抱怨他们对*你*做得不够。除了他们的任务（NG 5 导出）之外，他们还应该完成您的工作（NG 7 导出）。你有没有分叉 github 代码并更新 Angular 7 以与世界分享你的工作？在名称上，如果它适用于所有版本，将其称为“NG 5 导出”将是愚蠢的，但这正是您抱怨它不适用的地方。在我看来，它的名字是准确的。 (2认同)

Answer 2

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

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

如何将Angular Material Table导出为ex​​cel或pdf或csv