将表格导出到excel Angular 5

Question

我正在尝试将我的表格导出到 excel 工作表中，我正在使用 json 数据动态生成我的 html 表格。

我正在使用此代码以角度生成我的表格：

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

这正在生成一个表和一个我正在尝试使用的值：https://www.npmjs.com/package/tableexport 这个库来导出我的表。当我添加 html 表并运行此代码时：

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

在 ngoninit 内部，我可以看到三个按钮，它们都可以正常工作，但是。当我使用上面的代码生成动态表时，我看不到任何要导出的按钮。

我添加了一个按钮，在该点击时我正在使用这个：

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

当我点击这个按钮时，我可以看到所有三个要导出的按钮，但没有一个是可点击的。有什么办法可以让它与动态 html 表一起工作。

Answer 1

例如，您的按钮中缺少 (click)="myEvent()"

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

而且，在 myEvent 中你定义了

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

不应该，只是为了确保你抓住正确的桌子

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

在 Angular 中，您应该使用模板引用变量 (#myTable) 并使用 @ViewChild('myTable') 在控制器中获取对它们的引用