前端处理Excel：从导入导出到数据处理全攻略

在前端开发中，处理Excel文件是高频需求——无论是后台管理系统的批量数据导入、报表导出，还是用户上传数据的解析校验，掌握操作Excel的技能都能大幅提升产品体验。本文将从实用角度出发，手把手教你用React实现Excel的导入、解析、处理和导出。

一、核心依赖库：SheetJS（xlsx）

前端处理Excel的核心工具首推SheetJS（xlsx）（也叫js-xlsx），这是一个轻量、强大的JavaScript库，支持绝大多数Excel格式（.xlsx、.xls、.csv等）。

1. 安装依赖

# npm安装npminstallxlsx --save# yarn安装yarnaddxlsx

二、Excel文件导入与解析

需求：用户上传Excel文件，React组件解析并展示数据（基于React 18+ Hooks实现）。

完整代码实现

import React, { useState } from 'react'; import * as XLSX from 'xlsx'; import './ExcelHandler.css'; const ExcelImport = () => { // 存储解析后的表头和数据 const [tableHeader, setTableHeader] = useState([]); const [tableData, setTableData] = useState([]); // 处理文件上传 const handleFileUpload = (e) => { const file = e.target.files[0]; if (!file) return; // 创建FileReader读取文件 const reader = new FileReader(); // 读取完成后的回调 reader.onload = (event) => { try { // 解析Excel文件 const data = new Uint8Array(event.target.result); const workbook = XLSX.read(data, { type: 'array' }); // 获取第一个工作表（默认取第一个sheet） const firstSheetName = workbook.SheetNames[0]; const worksheet = workbook.Sheets[firstSheetName]; // 将sheet转换为JSON格式（header:1 表示第一行作为表头） const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 }); // 提取表头和数据 if (jsonData.length > 0) { setTableHeader(jsonData[0]); // 第一行作为表头 setTableData(jsonData.slice(1)); // 剩余行作为数据 } } catch (error) { console.error('Excel解析失败：', error); alert('文件解析失败，请确认是有效的Excel文件！'); } }; // 以二进制方式读取文件 reader.readAsArrayBuffer(file); // 清空文件选择框，避免重复选择同一文件不触发change事件 e.target.value = ''; }; return ( <div className="excel-import"> {/* 文件上传控件 */} <input type="file" accept=".xlsx,.xls,.csv" onChange={handleFileUpload} className="file-input" /> {/* 解析后的数据展示 */} {tableData.length > 0 && ( <table className="data-table"> <thead> <tr> {tableHeader.map((header, index) => ( <th key={index}>{header}</th> ))} </tr> </thead> <tbody> {tableData.map((row, rowIndex) => ( <tr key={rowIndex}> {row.map((cell, cellIndex) => ( <td key={cellIndex}>{cell}</td> ))} </tr> ))} </tbody> </table> )} </div> ); }; export default ExcelImport;

关键代码解释

1. 文件读取：FileReader以ArrayBuffer格式读取文件，是SheetJS推荐的二进制读取方式，兼容性最好；
2. 核心解析逻辑：XLSX.read()解析二进制数据为工作簿对象，sheet_to_json将工作表转为数组格式，方便React渲染；

三、实战场景2：React生成并导出Excel

需求：将前端的JSON数据导出为Excel文件（支持自定义表头、sheet名称）。

完整代码实现

import React from 'react'; import * as XLSX from 'xlsx'; import './ExcelExport.css'; const ExcelExport = () => { // 模拟前端业务数据 const mockData = [ { name: '张三', age: 25, city: '北京', job: '前端开发' }, { name: '李四', age: 30, city: '上海', job: '后端开发' }, { name: '王五', age: 28, city: '广州', job: '产品经理' }, { name: '赵六', age: 27, city: '深圳', job: 'UI设计' }, ]; // 导出Excel核心方法 const exportToExcel = () => { try { // 1. 定义表头和对应的数据源key const header = ['姓名', '年龄', '城市', '职业']; const keyMap = ['name', 'age', 'city', 'job']; // 2. 构建sheet数据（表头 + 数据行） const sheetData = [header]; // 先添加表头 mockData.forEach(item => { const row = keyMap.map(key => item[key]); // 按表头顺序提取数据 sheetData.push(row); }); // 3. 创建工作簿和工作表 const workbook = XLSX.utils.book_new(); // 新建工作簿 const worksheet = XLSX.utils.aoa_to_sheet(sheetData); // 数组转sheet // 4. 自定义列宽（可选优化） worksheet['!cols'] = [ { wch: 10 }, // 姓名列宽 { wch: 8 }, // 年龄列宽 { wch: 10 }, // 城市列宽 { wch: 12 }, // 职业列宽 ]; // 5. 将工作表添加到工作簿，自定义sheet名称 XLSX.utils.book_append_sheet(workbook, worksheet, '员工信息表'); // 6. 导出文件（触发浏览器下载） XLSX.writeFile(workbook, '员工数据.xlsx'); } catch (error) { console.error('Excel导出失败：', error); alert('文件导出失败，请重试！'); } }; return ( <div className="excel-export"> <button onClick={exportToExcel} className="export-btn"> 导出Excel文件 </button> </div> ); }; export default ExcelExport;

关键代码解释

1. Sheet创建：aoa_to_sheet将二维数组转换为工作表对象，是React中处理结构化数据的常用方式；
2. 导出逻辑：XLSX.writeFile()直接触发浏览器下载，无需后端接口，完全前端实现。

四、进阶技巧：React中处理复杂场景

1. 结合React组件复用（封装通用Excel工具）

// utils/excelHelper.js import * as XLSX from 'xlsx'; // 通用Excel解析方法 export const parseExcelFile = (file) => { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = (event) => { try { const data = new Uint8Array(event.target.result); const workbook = XLSX.read(data, { type: 'array' }); const firstSheetName = workbook.SheetNames[0]; const jsonData = XLSX.utils.sheet_to_json(workbook.Sheets[firstSheetName], { header: 1 }); resolve(jsonData); } catch (error) { reject(error); } }; reader.readAsArrayBuffer(file); }); }; // 通用Excel导出方法 export const exportExcelFile = (data, header, keyMap, sheetName, fileName) => { const sheetData = [header]; data.forEach(item => { sheetData.push(keyMap.map(key => item[key])); }); const workbook = XLSX.utils.book_new(); const worksheet = XLSX.utils.aoa_to_sheet(sheetData); XLSX.utils.book_append_sheet(workbook, worksheet, sheetName || '数据报表'); XLSX.writeFile(workbook, fileName || '导出数据.xlsx'); };

在React组件中复用：

import { parseExcelFile, exportExcelFile } from './utils/excelHelper'; // 导入时使用 const handleFileUpload = async (e) => { const file = e.target.files[0]; if (!file) return; try { const jsonData = await parseExcelFile(file); setTableHeader(jsonData[0]); setTableData(jsonData.slice(1)); } catch (error) { alert('解析失败：' + error.message); } }; // 导出时使用 const handleExport = () => { const header = ['姓名', '年龄', '城市']; const keyMap = ['name', 'age', 'city']; exportExcelFile(mockData, header, keyMap, '用户信息', '用户数据.xlsx'); };

总结

1. 导入Excel的关键是通过FileReader读取文件，解析为数组后更新React状态，再渲染到页面；
2. 导出Excel的核心是将JSON数据映射为二维数组，通过SheetJS生成工作簿并触发浏览器下载；