React+Ant Design前端实现读取与导出Excel文件
作者：小小愿望
在实际业务场景中,我们经常需要处理 Excel 文件的导入导出,本文将以 React + Ant Design 项目为例,演示如何通过 xlsx 库实现以下功能,希望对大家有所帮助
一、前言
在实际业务场景中，我们经常需要处理 Excel 文件的导入导出。无论是数据填报、报表生成还是数据分析，Excel 作为一种广泛使用的电子表格格式，与前端应用的结合愈发紧密。本文将以 React + Ant Design 项目为例，演示如何通过 xlsx 库实现以下功能：
- 读取本地 XLSX 文件并解析为表格数据
- 将表格数据导出为 XLSX 文件
二、技术栈
React: 构建用户界面，凭借其高效的渲染机制和丰富的生态系统，成为现代 Web 开发的热门选择。
Ant Design: UI 组件库，提供了一套美观且易用的 UI 组件，大大加快了开发速度。
xlsx (SheetJS): Excel 文件处理库，功能强大，支持多种 Excel 操作，如读写、格式化等。
三、准备工作
1. 创建React项目
npx create-react-app antd-xlsx --template typescript cd antd-xlsx
此命令会创建一个基于 TypeScript 的 React 项目，并为后续开发做好准备。
2. 安装依赖
npm install antd @ant-design/icons xlsx
安装所需的依赖包，包括 Ant Design 组件库、图标库以及用于处理 Excel 文件的 xlsx 库。
3. 目录结构
src/
├── components/
│ └── XlsxHandler.tsx
├── App.tsx
├── index.tsx
合理的目录结构有助于项目的组织和维护。
四、核心实现
1. 文件读取模块
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. 主应用集成
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实例避免内存泄漏
到此这篇关于React+Ant Design前端实现读取与导出Excel文件的文章就介绍到这了,更多相关React读取与导出Excel内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！