reactjs - 如何将表格导出为 CSV？

Question

我有一个包含另一个表的可扩展行的表。它是使用名为 antd 的库渲染的。我想将表格与可扩展文件一起导出为 CSV 文件。桌子 ：

标签： reactjscsvhtml-tableexport-to-csvantd

Answer 1

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

您可以CSVLink通过将表格数据设置为元素来使用。

例子：

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

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

---

编辑：

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

例如：

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

使用依赖的 csv 链接

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

用于嵌套表数据的CodeSandBox 。