Экспорт таблицы в Excel Angular 5

Question

Я пытаюсь экспортировать свою таблицу в таблицу Excel, здесь я генерирую свою таблицу html, используя данные json динамически.

Я использую этот код для генерации моей таблицы в угловых значениях:

   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

Существует утилита, которая обеспечивает поддержку экспорта в Excel для компонентов таблицы материалов. Я недавно поделился на нпм. Пока он используется несколькими приложениями в prod.

коврик стол-экспортер

Что вам нужно сделать, это просто использовать директиву ngxMatTableExporter и связанные с ней свойства.

<mat-table [dataSource]="dataSource" #mytable matSort ngxMatTableExporter [cdkTable]="mytable" [exporterButton]="exportButton" sheetName="someSheetName" fileName="someFileName">

Answer 2

вам не хватает (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')