使用react的数据导出.数据表.组件导出csv

Question

我是新来的反应。

我正在尝试将使用“react data -table-component”显示的JSON数据导出到CSV文件中。

我模仿了此链接的例子，复制了所提供的确切代码片段。下面是我的代码片段和编译过程中发生的相应错误。

import Export from "react-data-table-component"
import DataTable, { TableColumn, TableStyles } from "react-data-table-component";
import React from "react";

  ---code declarations---

  const actionsMemo = React.useMemo(() => <Export onExport={() => downloadCSV(customerList)} />, []);

  return (
    <>
      <Row>
        <Col lg={3}>
          <Box className="box" sx={{ display: 'flex', alignItems: 'flex-end' }}>
          
            <TextField id="input-with-sx" label="Input National ID" variant="standard" />
            <PersonSearchIcon sx={{ color: 'action.active', mr: 1, my: 0.5 }} />
          </Box>
        </Col>
      </Row>
      <br/>
      <Row>
        <Col lg={12}>
          <div className="card mb-3">
            <div className="card-body">
              <DataTable columns={columns} data={customerList}
                pagination  customStyles={mycustomStyles} actions={actionsMemo}/>
            </div>
          </div>          
        </Col>
      </Row>
    </>
  );

​

​

是否有人能帮助我识别我可能丢失的其他模块，以便具有导出数据功能。提前谢谢。

Answer 1

这实际上是一个重要的问题。

import Export from "react-data-table-component"

在这里，您将从包导入默认的导出，并将其分配给变量Export。默认的导出是DataTable组件，它没有onExport支柱。

没有从包导出的Export组件。您所看到的是一个本地声明(而不是导出) Export组件，它用于它们的文档中。

const Export = ({ onExport }) => <Button onClick={e => onExport(e.target.value)}>Export</Button>;

这是源文件。它依赖于一个样式的组件。他们在这里使用e.target.value对我来说没有任何意义。

您可以使用适当的Export类型来创建您自己的TypeScript组件，方法是将这两种类型中的任一种放在代码中：

简单版本：

export const Export = ({ onExport }: { onExport: () => void }) => (
  <button onClick={() => onExport()}>Export</button>
);

支持HTML button的任何支持(如className和style)：

type ExportProps = {
  onExport: React.MouseEventHandler<HTMLButtonElement>;
} & JSX.IntrinsicElements["button"];

export const Export = ({ onExport, ...props }: ExportProps) => (
  <button {...props} onClick={onExport}>
    Export
  </button>
);

Answer 2

对于这个问题，我有非常简单的解决办法。

您可以尝试使用非常简单的方法将表数据json转换为csv，或将json转换为xlsx。

我的示例代码试图将json转换为xlsx：

  function downloadXLS() {
    const ws = XLSX.utils.json_to_sheet(this.myJsonDataArray);
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, "People");
    XLSX.writeFile(wb, 'reports.xlsx');
  }

添加按钮下载：

<Button onClick={() => downloadXLS()}>Export</Button>

另一个解决方案是csv的数据数组：(我从先前的响应中获得了这段代码)

function convertArrayOfObjectsToCSV(array) {
    let result;

    const columnDelimiter = ',';
    const lineDelimiter = '\n';
    const keys = Object.keys(data[0]);

    result = '';
    result += keys.join(columnDelimiter);
    result += lineDelimiter;

    array.forEach(item => {
        let ctr = 0;
        keys.forEach(key => {
            if (ctr > 0) result += columnDelimiter;

            result += item[key];
            // eslint-disable-next-line no-plusplus
            ctr++;
        });
        result += lineDelimiter;
    });

    return result;
}


function downloadCSV() {
    const link = document.createElement('a');
    let csv = convertArrayOfObjectsToCSV(this.myJsonDataArray);
    if (csv == null) return;

    const filename = 'export.csv';

    if (!csv.match(/^data:text\/csv/i)) {
        csv = `data:text/csv;charset=utf-8,${csv}`;
    }

    link.setAttribute('href', encodeURI(csv));
    link.setAttribute('download', filename);
    link.click();
}

添加按钮下载：

<Button onClick={() => downloadCSV()}>Export</Button>