Question

我正在尝试将绘制的html表完全动态地导出到csv文件中。我尝试实现多个脚本，functions.etc，但未获得所需的结果。如果有人可以帮助我，我将不胜感激。该表中的信息是从“ jsonData”中的“请求”中加载的，需要澄清的是，我不需要知道“ Headers”，仅需要了解表主体中的信息就很重要： ts代码：

jsonData:any;
_object = Object;

“ jsonData”看起来像：

[{ Subject_ID：“ ACCT101”， First_Available_Date：“ 01/01/01”， .... }， { Subject_ID：“ 510862185-X”， First_Available_Date：“ 06/04/19” ..} .... ]

HTML

<table>
  <thead>
    <tr>
      <th *ngFor="let header of _object.keys(jsonData[0]); let i = index">{{header}}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of jsonData; let i = index">
      <td *ngFor="let objKey of _object.keys(row); let j = index">{{ row[objKey] }} </td>
    </tr>
  </tbody>
</table>

<button class="btn btn-submit btn-sm float-right" type="submit" (click)="export()">
      Submit
    </button>

Answer 1

请尝试以下代码。这将从表中提取数据并下载为csv。

<!DOCTYPE html>
<html>
    <head>
    <style>
    td, table,th{
    border: solid 1px black;
    }
    </style>
    </head>
    <body>
        <table id="data_table">
          <thead>
            <tr>
              <th>Subject_ID</th>
              <th>First_Available_Date</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>ACCT101</td>
              <td>01/01/01</td>
            </tr>
            <tr>
            <td>510862185-X</td>
            <td>06/04/19</td>
            </tr>
            <tr>
            <td>New data</td>
            <td>New data 1</td>
            </tr>
          </tbody>
        </table>
<script>
function exportit() {
    var csv='';
    table=document.getElementById("data_table");
    tr=table.children[0].children[0];
    for(i=0;i<tr.children.length;i++)
    {
        csv+=tr.children[i].innerText+",";
    }
    csv=csv.substring(0,csv.length-1)+"\n";
    tbody=table.children[1];
    for(i=0;i<tbody.children.length;i++)
    {
        for(j=0;j<tbody.children[i].children.length;j++)
        {
            csv+=tbody.children[i].children[j].innerText+",";
        }
        csv=csv.substring(0,csv.length-1)+"\n";
    }
    csv=csv.substring(0,csv.length-1)+"\n";
        var hiddenElement = document.createElement('a');
        hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
        hiddenElement.target = '_blank';
        hiddenElement.download = 'data.csv';
        hiddenElement.click();
}
</script><br>
<button onclick="exportit()">export</button>
    </body>
</html>

角度：HTML表导出到csv文件

1 个答案: