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

- 一、前言
- 二、技术栈
- 三、准备工作
- - [1. 创建React项目](#1. 创建React项目)
  - [2. 安装依赖](#2. 安装依赖)
  - [3. 目录结构](#3. 目录结构)
- 四、核心实现
- - [1. 文件读取模块](#1. 文件读取模块)
  - [2. 主应用集成](#2. 主应用集成)
- 五、技术要点解析
- - [1. 文件读取流程](#1. 文件读取流程)
  - [2. 数据导出流程](#2. 数据导出流程)
  - [3. 关键技术点](#3. 关键技术点)
- 六、常见问题排查
- 七、扩展方向

一、前言

在实际业务场景中，我们经常需要处理Excel文件的导入导出。本文将以React+Ant Design项目为例，演示如何通过xlsx库实现以下功能：

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

二、技术栈

React: 构建用户界面
Ant Design: UI组件库
xlsx (SheetJS): Excel文件处理库

三、准备工作

1. 创建React项目

bash 复制代码

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

2. 安装依赖

bash 复制代码

npm install antd @ant-design/icons xlsx

3. 目录结构

复制代码

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实例避免内存泄漏

六、常见问题排查

问题现象	解决方案
文件读取失败	确保使用`readAsBinaryString`而非`readAsArrayBuffer`
中文乱码	设置工作簿编码为utf-8
IE浏览器兼容	添加polyfill支持FileReader API
大数据量卡顿	采用Web Workers进行异步处理

七、扩展方向

支持多工作表选择
自定义导出模板
在线预览Excel内容
复杂公式计算支持