Angular：HTML 表导出到 csv 文件答案

【问题标题】：Angular: HTML Table export to csv fileAngular：HTML 表导出到 csv 文件
【发布时间】：2020-08-27 06:16:43
【问题描述】：

我正在尝试将绘制的 html 表完全动态地导出到 csv 文件中。我试图实现几个脚本、functions.etc，但我没有得到想要的结果。如果有人可以帮助我，我将不胜感激。表中的信息是从“jsonData”中的请求加载的，重要的是要澄清我不需要知道“标题”，只需要知道表体内的信息： 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>

【问题讨论】：

标签： html angular export-to-csv

【解决方案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>

【讨论】：

当然可以，但存在的问题是：用户可以对表应用一些过滤器和修改...因此我无法直接从 jsonData 获取它
@ClaudiaBermúdez 好的，我已经更新了上面的代码。