当前位置：首页 > article >正文

使用 React 和 Ant Design 处理 Excel 和 CSV 文件

article 2025/3/12 20:09:05

在现代 Web 开发中，文件上传和解析是常见的需求。本文将介绍如何使用 React 和 Ant Design 库来处理 Excel 和 CSV 文件的上传，并将提取的表头信息展示在表格中。

1. 项目基础

确保你已经创建了一个 React 项目，并安装了必要的依赖。可以使用以下命令安装 Ant Design 和 ExcelJS：

npm install antd exceljs

2. 组件结构

我们将构建一个名为 Demo 的组件，该组件包含文件上传功能，并在上传后展示表头信息。

代码结构

import Authority from '@/util/Authority';
import { Button, Table, Upload } from 'antd';
import { ColumnsType } from 'antd/es/table';
import Excel, { CellValue } from 'exceljs';
import { useState } from 'react';

const Demo = () => {
    const [headers, setHeaders] = useState<CellValue[]>([]);
    const authority = Authority.getInstance();
    
    const columns: ColumnsType<Record<string, any>> = [
        {
            title: '序号',
            dataIndex: 'index',
            key: 'index',
            align: 'center',
            render: (text: string, record: any, index: number) => index + 1,
        },
        {
            title: '名称',
            dataIndex: 'name',
            align: 'center',
            key: 'name',
        },
    ];

    return (
        <>
            <Upload
                maxCount={1}
                accept=".xlsx,.csv"
                showUploadList={false}
                action="请求地址"
                headers={{
                    Authorization: 你的token,
                }}
                data={(file) => {
                    return {
                        fileName: file.name,
                        mimeType: file.type,
                    };
                }}
                onChange={async (info) => {
                    if (info.file.status === 'done') {
                        const file = info.file.originFileObj;
                        const workbook = new Excel.Workbook();
                        const reader = new FileReader();
                        reader.onload = async (e) => {
                            const result = e.target?.result;
                            if (info.file.name.endsWith('.csv')) {
                                // 处理 CSV 文件
                                const lines = (result as string)?.split('\n');
                                const headers = lines[0].split(',');
                                const newHeaders = headers.map((header) => header.trim());
                                setHeaders(newHeaders);
                            } else {
                                // 处理 Excel 文件
                                const buffer = result as ArrayBuffer;
                                if (buffer) await workbook.xlsx.load(buffer);
                                const worksheet = workbook.getWorksheet(1);
                                const headers: CellValue[] = [];
                                worksheet?.getRow(1).eachCell((cell) => {
                                    headers.push(cell.value);
                                });
                                setHeaders(headers);
                            }
                        };
                        if (info.file.name.endsWith('.csv')) {
                            reader.readAsText(file!);
                        } else {
                            reader.readAsArrayBuffer(file!);
                        }
                    }
                }}
            >
                <Button id="upload">上传</Button>
            </Upload>
            {headers.length > 0 && (
                <Table
                    style={{ width: 500 }}
                    rowKey={(record, index) => `header${index}`}
                    columns={columns}
                    dataSource={headers.map((elem, index) => ({
                        index,
                        name: elem,
                    }))}
                    pagination={false}
                />
            )}
        </>
    );
};
export default Demo;

3. 代码解析

3.1 组件导入

我们首先导入了需要的组件和库，包括 Ant Design 的 Upload 和 Table 组件，以及 ExcelJS 用于处理 Excel 文件。

3.2 状态管理

使用 useState 钩子来管理表头数据：

const [headers, setHeaders] = useState<CellValue[]>([]);

3.3 列配置

我们定义了表格列配置，包含序号和名称两列：

const columns: ColumnsType<Record<string, any>> = [
    {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        align: 'center',
        render: (text: string, record: any, index: number) => index + 1,
    },
    {
        title: '名称',
        dataIndex: 'name',
        align: 'center',
        key: 'name',
    },
];