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

Question

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?

Garretgarreth

I've done something similar here: github.com/maxime1992/pizza-sync/blob/… using the npm lib csv-file-creator you should be able to figure out with that :) – Sharrisharron

github.com/MrRio/jsPDF – Blenny

Answer 1

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 :)

Undrape

this is about angular 5, how about angular 6 and angular 7? – Severin

@Serge , I used Angular 6 for this small app. – Undrape

is not compatible with the Angular7, as I updated the project and has incorrect dependencies... also, is stupid a little bit to name the project using an angular specific version.... – Severin

@Serge It is still working for me on Angular 7. I am not the creator of the csv exporter I simply use it in my work. If you put your app on stackblitz or github, I can take a quick look. – Undrape

Got to disagree with you on all counts Serge. Whoever created the npm package spent time doing something, then sharing that with the world. You seem to be complaining that they didn't do enough for you. That on top of the task they had (NG 5 export), they should have done your work (NG 7 export). Have you forked the github code & updated for Angular 7 to share your work with world? On the name, it would be stupid to call it "NG 5 export" if it worked for all versions, but that's the very thing you are complaining it doesn't do. Sounds to me like it is accurately named. – Bernadettebernadina

UPDATE : import { Angular5Csv } from 'angular5-csv/dist/Angular5-csv'; – Pentobarbital

npm install --save [email protected] import { MatTableExporterModule } from 'mat-table-exporter'; @NgModule({ imports: [ ... MatTableExporterModule ], ]}) <mat-table matTableExporter [dataSource]="dataSource" #exporter="matTableExporter"> – Fresh

Answer 2

You can use my mat-table-exporter package to export in excel, csv, json or txt formats. It supports paginated tables too.

Stackblitz demo: https://stackblitz.com/edit/mte-demo

Lamarre

How can we pass options from ts file? (click)="exporter.exportTable('csv', exportOptions)", how to handle from ts like dymanic filename, sheet name, etc from ts file? not from html file? – Eyas

By having an exportOptions field in your ts class that keeps the required options will suffice already. – Lamarre

I achieved by passing exporter in click event function, like (click)="submitDownload(exporter)". Thanks for your package. – Eyas

How to export data for hidden columns? – Catchweight

Unfortunately, this package is no longer maintained, if you're using angular 17, you'll have to use something else. – Aldehyde

Answer 3

You can use mat-table-exporter. To access the "export" method in the typescript code:

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

<table mat-table matTableExporter [dataSource]="dataSource" 
                               #exporter="matTableExporter">

Macrophysics

Answer 4

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.

Rumanian

Answer 5

It can be done with out using any library. For dynamic functionality do not convert html element in to csv. Such as, If would like to implement pagination etc. Then It can be done as follow:

exportCsv(): void {
  let csv = '';
  for (let column = 0; column < this.columns.length; column++) {
    csv += this.columns[column] + ';';
    csv = csv.replace(/\n/g, '');
  }
  csv = csv.substring(0, csv.length - 1) + '\n';
  const rows = this.filterdRows;

  for (let row = 0; row < rows.length; row++) {
   for (let rowElement = 0; rowElement < rows[row].length; rowElement++) {
      csv += rows[row][rowElement] + ';';
   }
    csv = csv.substring(0, csv.length - 1) + '\n';
  }
  csv = csv.substring(0, csv.length - 1) + '\n';
  const docElement = document.createElement('a');
  const universalBOM = '\uFEFF';

  //You can edit the code for the file name according to your requirements
  let filename = this.filename + '_';
  filename = filename.concat(this.currentDateString.toString());
  const fileNameWithType = filename.concat('.csv');
  docElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(universalBOM + csv);
  docElement.target = '_blank';
  docElement.download = fileNameWithType;
  docElement.click();
}

Mattoid