前端读取与导出XLSX文件实战指南（React+Ant Design）

一、前言

在实际业务场景中，我们经常需要处理 Excel 文件的导入导出。无论是数据填报、报表生成还是数据分析，Excel 作为一种广泛使用的电子表格格式，与前端应用的结合愈发紧密。本文将以 React + Ant Design 项目为例，演示如何通过 xlsx 库实现以下功能：

读取本地 XLSX 文件并解析为表格数据
将表格数据导出为 XLSX 文件

二、技术栈

React: 构建用户界面，凭借其高效的渲染机制和丰富的生态系统，成为现代 Web 开发的热门选择。
Ant Design: UI 组件库，提供了一套美观且易用的 UI 组件，大大加快了开发速度。
xlsx (SheetJS): Excel 文件处理库，功能强大，支持多种 Excel 操作，如读写、格式化等。

三、准备工作

1. 创建React项目

bash 复制代码

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

此命令会创建一个基于 TypeScript 的 React 项目，并为后续开发做好准备。

2. 安装依赖

bash 复制代码

npm install antd @ant-design/icons xlsx

安装所需的依赖包，包括 Ant Design 组件库、图标库以及用于处理 Excel 文件的 xlsx 库。

3. 目录结构

css 复制代码

src/
├── components/
│   └── XlsxHandler.tsx
├── App.tsx
├── index.tsx

合理的目录结构有助于项目的组织和维护。

四、核心实现

1. 文件读取模块

typescript 复制代码

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;

2. 主应用集成

typescript 复制代码

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;

五、技术要点解析

1. 文件读取流程

使用HTML5的File API获取文件对象
通过FileReader读取二进制内容
使用SheetJS解析二进制流生成工作簿
提取第一个工作表的数据
转换为JSON格式渲染表格

2. 数据导出流程

将JSON数据转换为工作表
创建新的工作簿并添加工作表
使用writeFile方法生成Excel文件

3. 关键技术点

二进制处理 ：必须使用readAsBinaryString方法读取文件
键值映射：JSON字段名对应Excel列名
类型校验：严格校验文件扩展名防止格式错误
内存优化：及时释放FileReader实例避免内存泄漏