antd导入excel
时间: 2023-09-05 09:13:54 浏览: 39
要在antd中导入Excel文件,你可以使用react-excel-import或xlsx库。以下是一些示例代码:
首先,安装要使用的库:
```
npm install react-excel-import xlsx --save
```
然后,创建一个Excel导入组件:
```jsx
import React, { useState } from 'react';
import { Input, Button, Table } from 'antd';
import { readXlsxFile } from 'react-excel-import';
const ExcelImport = () => {
const [file, setFile] = useState();
const [data, setData] = useState([]);
const handleFileChange = (e) => {
setFile(e.target.files[0]);
};
const handleImport = () => {
readXlsxFile(file).then((rows) => {
setData(rows);
});
};
const columns = data[0] ? Object.keys(data[0]).map((key) => ({ title: key, dataIndex: key })) : [];
return (
<>
<Input type="file" onChange={handleFileChange} />
<Button onClick={handleImport}>Import</Button>
<Table dataSource={data} columns={columns} />
</>
);
};
export default ExcelImport;
```
在这个组件中,我们使用`useState` hook来存储选择的文件和导入的数据。
当用户选择文件后,`handleFileChange`函数将文件存储在`file`状态中。当用户点击“导入”按钮时,`handleImport`函数使用`readXlsxFile`函数从Excel文件中读取数据,并将它们存储在`data`状态中。
最后,我们使用`Table`组件来显示导入的数据。我们使用`Object.keys`函数来创建表格列,如果数据为空,则不创建表格列。
希望这可以帮助你在antd中导入Excel文件。