How to export Angular Material Table to excel or pdf or csv

Kamran Mushtaq picture Kamran Mushtaq · Mar 8, 2018 · Viewed 22.1k times · Source

i am creating an angular table using this example from angular material https://material.angular.io/components/table/overview is there anyway to export it in excel or pdf?

Answer

Kav Khalsa picture Kav Khalsa · Sep 6, 2018

In your table component.ts

declare a value called 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

In your HTML create a button <button class="btn btn-primary" (click)="exportCsv()">Export to CSV</button>

Finally, export the changed data to a CSV

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

More details about the exporter can be found here: https://www.npmjs.com/package/angular5-csv

I hope this helps :)