React+Ant Design前端实现读取与导出Excel文件

npx create-react-app antd-xlsx --template typescript
cd antd-xlsx

npm install antd @ant-design/icons xlsx

import React, { useState } from 'react';
import { Upload, Table, Button } from 'antd';
import * as XLSX from 'xlsx';
import { InboxOutlined } from '@ant-design/icons';

const XlsxHandler = () => {
  const [dataSource, setDataSource] = useState<any[]>([]);
  const [headers, setHeaders] = useState<string[]>([]);

  // 文件读取处理
  const handleFileChange = (info: any) => {
    const file = info.file;
    if (!file) return;
    
    // 校验文件类型
    const isXlsx = file.name.endsWith('.xlsx') || file.name.endsWith('.xls');
    if (!isXlsx) {
      info.status = 'error';
      info.response = '请选择正确的Excel文件';
      return;
    }

    const reader = new FileReader();
    reader.onload = (e: any) => {
      const binaryStr = e.target.result;
      const workbook = XLSX.read(binaryStr, { type: 'binary' });
      const firstSheetName = workbook.SheetNames[0];
      const sheet = workbook.Sheets[firstSheetName];
      
      // 提取表头
      const jsonData = XLSX.utils.sheet_to_json(sheet);
      if (jsonData.length > 0) {
        setHeaders(Object.keys(jsonData[0]))
        setDataSource(jsonData);
      }
    };
    reader.readAsBinaryString(file);
  };

  // 数据导出功能
  const exportToExcel = () => {
    const ws = XLSX.utils.json_to_sheet(dataSource);
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, 'ExportedData');
    
    XLSX.writeFile(wb, `export_${Date.now()}.xlsx`);
  };

  return (
    <div style={{ padding: 20 }}>
      <Upload 
        beforeUpload={handleFileChange} 
        showUploadList={false}
        maxCount={1}
        accept=".xlsx,.xls"
      >
        <Button icon={<InboxOutlined />}>选择Excel文件</Button>
      </Upload>

      {headers.length > 0 && (
        <Table 
          dataSource={dataSource} 
          rowKey="id" 
          pagination={{ pageSize: 10 }} 
          style={{ marginTop: 20 }}
        >
          {headers.map((header) => (
            <Table.Column key={header} title={header} dataIndex={header} />
          ))}
        </Table>
      )}

      <Button 
        type="primary" 
        onClick={exportToExcel} 
        disabled={!headers.length} 
        style={{ marginTop: 20 }}
        icon={<DownloadOutlined />}
      >
        导出当前数据
      </Button>
    </div>
  );
};

export default XlsxHandler;

import React from 'react';
import './App.css';
import { ConfigProvider } from 'antd';
import XlsxHandler from './components/XlsxHandler';
import { DownloadOutlined } from '@ant-design/icons';

function App() {
  return (
    <ConfigProvider>
      <div className="App">
        <h1>Excel文件处理示例</h1>
        <XlsxHandler />
      </div>
    </ConfigProvider>
  );
}

export default App;