[英]Data export using react-data-table-component export csv
I am new to React.我是 React 的新手。
I am trying to export JSON data that is displayed using the 'react-data.table-component' to a CSV file.我正在尝试将使用“react-data.table-component”显示的 JSON 数据导出到 CSV 文件。
I have followed the example from this link by copying the exact code snippet provided.我通过复制提供的确切代码片段来遵循此链接中的示例。 Below is my code snippet and the corresponding error occurring during compilation.
下面是我的代码片段和编译过程中出现的相应错误。
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>
</>
);
Could someone help me in identifying any other modules that I may be missing in order to have an export data functionality.有人可以帮助我识别我可能缺少的任何其他模块以具有导出数据功能。 Thanks in advance.
提前致谢。
This is actually an import issue.这实际上是一个进口问题。
import Export from "react-data-table-component"
In this line right here, you are importing the default export from the react-data-table-component
package and assigning it to the variable Export
.在此行中,您从
react-data-table-component
package 导入默认导出并将其分配给变量Export
。 The default export is the DataTable
component, which does not have an onExport
prop.默认导出是
DataTable
组件,它没有onExport
。
There is no Export
component exported from the package.没有从 package 导出的
Export
组件。 What you are seeing is a locally declared (not exported) Export
component which is used in their documentation.您看到的是在其文档中使用的本地声明(未导出)的
Export
组件。
const Export = ({ onExport }) => <Button onClick={e => onExport(e.target.value)}>Export</Button>;
Here's the source file .这是源文件。 It relies on a styled
Button
component .它依赖于样式化的
Button
组件。 Their use of e.target.value
here does not make any sense to me.他们在这里使用
e.target.value
对我来说没有任何意义。
You can create your own Export
component with proper TypeScript types by putting either of these in your code:您可以通过将其中任何一个放入您的代码中,使用适当的 TypeScript 类型创建自己的
Export
组件:
Simple version:简单版:
export const Export = ({ onExport }: { onExport: () => void }) => (
<button onClick={() => onExport()}>Export</button>
);
With support for any props of the HTML button
(such as className
and style
):支持 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>
);
I have very simple solution for this issue.对于这个问题,我有非常简单的解决方案。
You can try to convert table data json to csv or json to xlsx with very simple methods.您可以尝试使用非常简单的方法将表数据 json 转换为 csv 或 json 为 xlsx。
My sample code is try to convert json to 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');
}
Add button to download:添加按钮下载:
<Button onClick={() => downloadXLS()}>Export</Button>
Another solution is data array to csv: (I got this code from previous response)另一个解决方案是 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();
}
Add button to download:添加按钮下载:
<Button onClick={() => downloadCSV()}>Export</Button>
Based from Bilal Demir, this is my solution for React + react-data.table-component:基于 Bilal Demir,这是我对 React + react-data.table-component 的解决方案:
First install:首先安装:
npm install xlsx
Excel.tsx Excel.tsx
import { utils, writeFileXLSX } from 'xlsx';
export const handleDownloadExcel = (dataSource:any,sheetName:string,fileName:string) => {
const ws = utils.json_to_sheet(dataSource);
const wb = utils.book_new();
utils.book_append_sheet(wb, ws, sheetName);
writeFileXLSX(wb, `${fileName}.xlsx`);
};
In Table View, react-bootstrap + react-data.table-component:在表视图中,react-bootstrap + react-data.table-component:
import { handleDownloadExcel } from "../../../components/Excel";
const downloadExcel = () => {
handleDownloadExcel(dataSource,"SHEET_NAME","MY_FILENAME")
};
<Container fluid className="form-group row mt-10">
<Col>
<Button type={'button'} className="btn-sm float-end mx-2" text="Excel" onClick={downloadExcel} />
<DataTable
columns={columns}
data={dataSource}
pagination
/>
</Col>
</Container>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.