typescript 如何将角度材料表导出为 excel 或 pdf 或 csv
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49170893/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to export Angular Material Table to excel or pdf or csv
提问by Kamran Mushtaq
i am creating an angular table using this example from angular material https://material.angular.io/components/table/overviewis there anyway to export it in excel or pdf?
我正在使用这个例子从角度材料https://material.angular.io/components/table/overview创建一个角度表是否有将它导出为 excel 或 pdf 的方法？
采纳答案by Kav Khalsa
In your table component.ts
在你的表 component.ts
declare a value called
renderedData: any;
声明一个名为
renderedData: any;
Then in your constructor subscribe to the data that has been changed in your material table. I am guessing you are using a filterable table.
然后在您的构造函数中订阅材料表中已更改的数据。我猜你正在使用一个可过滤的表。
constructor(){
this.dataSource = new MatTableDataSource(TableData);
this.dataSource.connect().subscribe(d => this.renderedData = d);
}
npm install --save angular5-csv
npm install --save angular5-csv
In your HTML create a button
<button class="btn btn-primary" (click)="exportCsv()">Export to CSV</button>
在您的 HTML 中创建一个按钮
<button class="btn btn-primary" (click)="exportCsv()">Export to CSV</button>
Finally, export the changed data to a CSV
最后，将更改后的数据导出为 CSV
exportCsv(){
new Angular5Csv(this.renderedData,'Test Report');
}
More details about the exporter can be found here: https://www.npmjs.com/package/angular5-csv
可以在此处找到有关导出器的更多详细信息：https: //www.npmjs.com/package/angular5-csv
I hope this helps :)
我希望这有帮助 ：）
回答by talhature
You can use mat-table-exporterpackage to export in excel, csv, json or txt formats. It supports paginated tables too.
您可以使用mat-table-exporter包以 excel、csv、json 或 txt 格式导出。它也支持分页表。
Stackblitz demo: https://stackblitz.com/edit/mte-demo
Stackblitz 演示：https://stackblitz.com/edit/mte-demo
回答by kristou Ahmed
You can use ngx-csv for Angular 7 works fine "https://www.npmjs.com/package/ngx-csv." Get the data from the table with "this.dataSource.connect().subscribe(data=>this.renderedData=data);" and then use export function.
您可以将 ngx-csv 用于 Angular 7 工作正常“ https://www.npmjs.com/package/ngx-csv”。使用“this.dataSource.connect().subscribe(data=>this.renderedData=data);”从表中获取数据 然后使用导出功能。
