Question

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

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

            <TextInput
                style={styles.searchInput}
                value={value.toString()}
                onChange={this._onSearchTextChanged}
                keyboardType="default"
                autoFocus={this.state.editable}
                returnKeyType="done"
                onSubmitEditing={this._handleSaveEvent}
            />

这正在生成一个表和一个我要使用的值：https://www.npmjs.com/package/tableexport此库导出我的表。当我添加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);

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

我添加了一个按钮，然后单击该按钮，我正在使用它：

  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'）在控制器中获取对它们的引用

Answer 2

有一个实用程序可以为材料表组件提供excel导出支持我最近在npm上分享了。到目前为止，它已在产品中被多个应用程序使用。

mat-table-exporter

您应该做的只是使用ngxMatTableExporter指令及其相关属性。

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

将表格导出到Excel Angular 5

2 个答案: