antd+xlsx导入excel
时间: 2023-10-08 07:05:23 浏览: 50
使用 Ant Design 和 xlsx 库可以实现在前端页面中导入 Excel 文件并将其转换为 JSON 格式。下面是一个简单的示例:
```jsx
import React, { useState } from 'react';
import { Upload, Button } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import XLSX from 'xlsx';
const ImportExcel = () => {
const [jsonData, setJsonData] = useState(null);
const handleUpload = (file) => {
const reader = new FileReader();
reader.onload = (e) => {
const data = e.target.result;
const workbook = XLSX.read(data, { type: 'binary' });
const worksheet = workbook.Sheets[workbook.SheetNames[0]];
const result = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
setJsonData(result);
};
reader.readAsBinaryString(file);
};
return (
<>
<Upload onChange={(info) => handleUpload(info.file)}>
<Button icon={<UploadOutlined />}>导入 Excel</Button>
</Upload>
{jsonData && (
<pre>{JSON.stringify(jsonData, null, 2)}</pre>
)}
</>
);
};
export default ImportExcel;
```
在这个示例中,我们使用了 Ant Design 的 Upload 组件来实现文件上传。当用户选择文件后,`handleUpload` 函数将被调用,使用 `FileReader` 将文件读取为二进制字符串,然后使用 xlsx 库解析 Excel 文件并将其转换为 JSON 格式。最后,我们使用 `useState` 将 JSON 数据保存在组件的状态中,并在页面上显示它。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)