将表格导出到Excel Angular 5

Question

I am trying to export my table into excel sheet here I am generating my html table using json data dynamically.

I am using this code to generate my table in angular:

   var table = document.createElement("TABLE")  as HTMLTableElement;    
  var row,header,cell1, cell2;
  var data = chart.options.data;
  // table.style.border = "1px solid #000"; 
  header = table.createTHead();
  row = header.insertRow(0);
  table.setAttribute("id", "myId");    
  cell1 = row.insertCell(0);
  cell2 = row.insertCell(1);
  // cell1.style.border = "1px solid #000"; 
  // cell2.style.border = "1px solid #000"; 
  cell1.innerHTML = "<strong>Districts</strong>"; 
  cell2.innerHTML = "<b>"+rain_fall_type+"_Value</b>"; 
  for(var i = 0; i < data.length; i++){
    for(var j = 0; j< data[i].dataPoints.length; j++){
      // console.log(data[i].dataPoints[j]);
      // console.log(data[i].dataPoints[j].label);


      row = table.insertRow(1);
      cell1 = row.insertCell(0);
      cell2 = row.insertCell(1);
      // cell1.style.border = "1px solid #000"; 
      // cell2.style.border = "1px solid #000"; 
      cell1.innerHTML = "<strong>"+data[i].dataPoints[j].label+"</strong>";
      cell2.innerHTML = data[i].dataPoints[j].y; 
    }
  }    
  // document.getElementById("chartContainer").innerHTML = "<h1>"+rain_fall_type+" "+year+"</h2>";
  document.getElementById("chartContainer").appendChild(table);

This is generating a table and a values I am trying to use : https://www.npmjs.com/package/tableexport this library to export my table. When I am adding html table and run this code:

  var n =  new TableExport(document.getElementsByTagName("table"));

inside ngoninit I can see three buttons and all of them work fine but. When I am generating a dynamic table using above code I don't see any button to export.

I have added a button and on that click I am using this:

  myEvent(event) {
   var n =  new TableExport(document.getElementsByTagName("table"));
  }

When I click on this button I can see all three buttons to export but none of them is clickable. Is there any way I can make it work with dynamic html table.

Answer 1

you are missing the (click)="myEvent()" in your buttons, for example

<button (click)="myEvent($event)" type="button" tableexport-id="5bf287e5-xlsx" class="button-default xlsx">Export to xlsx</button>

But also, in myEvent you define

 var table = new TableExport(document.getElementsByTagName("table"));

Shouldn't it be, just to be sure you grab the correct table

 var table = new TableExport(document.getElementById("myId"));

In Angular you should be using Template reference variables ( #myTable ) and getting a reference to them in the controller with @ViewChild('myTable')

Answer 2

There is a utility that provides excel, csv, json and txt export support to material table components I've recently shared on npm. It is used by multiple applications in prod so far.

mat-table-exporter

What you should do is just using matTableExporter directive and related properties of it.

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