如何将Angular Material Table导出为ex​​cel或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

我希望这会有所帮助:)

Answer 2

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

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

Answer 3

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

SELECT
    Id AS ID,
    keywords AS keywords,
    '<a href="'javascript:;'" class="'DELETE'" data-id="'+ id +'">Delete</a>' AS 'Delete' 
FROM
    tblkeywords

Answer 4

您可以将ngx-csv用于Angular 7，效果很好“ https://www.npmjs.com/package/ngx-csv”。 从表中获取数据 “ this.dataSource.connect（）。subscribe（data => this.renderedData = data）;”然后使用导出功能。