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?

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

Answer 2

You can use 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

Answer 3

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.

Answer 4

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">

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();
}