Reactjs 如何将物料ui表导出到CSV？

你们中有人可以向我解释如何将材质ui表导出到CSV文件

 <Paper> 
    <Table>
      <TableHead>
        <TableRow>

            <TableCell>A</TableCell>
            <TableCell >B</TableCell>
            <TableCell>C</TableCell>
            <TableCell>D</TableCell>

        </TableRow>
      </TableHead>
      <TableBody>
        {this.rows.map(row => {
            return (
                <TableRow key={row.ID}>
                  <TableCell>{row.A}   </TableCell>
                  <TableCell >{row.B}</TableCell>
                  <TableCell>{row.C}</TableCell>   
                  <TableCell >{row.D}</TableCell>                
                </TableRow>
            );
        })}
      </TableBody>
    </Table>
  </Paper>

A.
B
C
D
{this.rows.map（row=>{
返回(
{row.A}
{row.B}
{row.C}
{row.D}
);
})}

我需要在他们推荐使用的材质UI上创建一个组件，将此表导出为csv格式

---

material table的一个道具是

exportButton={true}

，它呈现一个CSV导出按钮。

如果您想滚动您自己的解决方案，您可以使用

filefy

，这是在引擎罩下使用的

npm i --save filefy

然后

行

是数组的数组，例如

const rows = [
                [ 'r1c1', 'r1c2', 'r1c3', 'r1c4'],
                [ 'r2c1', 'r2c2', 'r2c3', 'r2c4'],
]

这里有一点脱节，因为

可以包含jsx（即使在您的情况下不包含jsx），所以您不能简单地从

中“转储”数据，因为它可能不是纯文本

如果您有简单的字符串值（如本例中的字符串值），则可以定义一个既可用于jsx又可用于CsvBuilder

const rows = [
                [ 'r1c1', 'r1c2', 'r1c3', 'r1c4'],
                [ 'r2c1', 'r2c2', 'r2c3', 'r2c4'],
]