如何将 table 导出为 CSV？

Question

我有一个 table，其中包含另一个 table 的可扩展行。它是使用名为 antd 的库呈现的。我想将 table 连同可扩展项一起导出为 CSV 文件。 table ：

Answer 1

作为一种方法，您可以使用 react-csv(@NPM) 导出 antd table 数据。

您可以通过将 table 数据设置到元素来使用 CSVLink。

示例：

<CSVLink
  filename={"TableContent.csv"}
  data={data}
  className="btn btn-primary"
>
  Download csv
</CSVLink>

在这里您可以找到一个 CodeSandBox 作为最小工作示例。

编辑：

对于嵌套 table 的使用，您可以将 table 数据与所需的嵌套 table 数据组合，以将所有数据导出到一个文件中。

例如：

  data.forEach(element => {
    exportedData.push(element);
    nestedData.forEach(element => exportedData.push(element));
  });

与依赖的 csv-link

      <CSVLink
        filename={"TableContent.csv"}
        data={exportedData}
        className="btn btn-primary"
      >

CodeSandBox 用于嵌套 Table 数据。

How to export a table to CSV?