Question

你们中的某人可以向我解释如何将Material-UI-Table导出到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>

我需要创建一个将此表导出为csv格式的组件

Answer 1

如果您想推出自己的解决方案，则可以使用material-table在后台使用的filefy

npm i --save filefy

然后

import { CsvBuilder } from 'filefy';
//...
const builder = new CsvBuilder('filename.csv');
builder
  .setDelimeter(',')
  .setColumns(['A', 'B', 'C', 'D' ])
  .addRows(data)
  .exportFile();

rows是一个数组数组，例如

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

这里有一个断开连接，因为<TableCell>可以在其中包含jsx（即使在您的情况下也不包含），因此您不能简单地从<Table>中“转储”数据因为它可能不是纯文本。

如果您有简单的字符串值（例如您的情况），则可能合适的是定义一个可用于jsx 和 string[][]

的CsvBuilder

Answer 2

在Material-UI的tables page 'Complementary projects' section上，他们建议使用material-table。

材料表的道具之一是exportButton={true}，它呈现CSV导出按钮。

Answer 3

您可以使用 exportAllData: true 导出所有数据，无需 filefy

<MaterialTable
              columns={
                  columns}
                  data={data}
                  title="Export all"
          
            options={{
            exportButton: true,
            exportAllData: true
            }} >

如何将material-ui表导出到CSV？

3 个答案: