【高频考点精讲】前端Excel处理方案：SheetJS和ExcelJS的对比使用

前端Excel处理方案：SheetJS和ExcelJS的对比使用

🧑‍🏫 作者：全栈老李

📅 更新时间：2025 年 5 月

🧑‍💻 适合人群：前端初学者、进阶开发者

🚀 版权：本文由全栈老李原创，转载请注明出处。

最近在项目里遇到了需要前端处理Excel的需求，发现不少同学对这块不太熟悉。作为”全栈老李”，今天就来聊聊前端处理Excel的两个主流库：SheetJS和ExcelJS。这两个库各有特点，用好了能解决不少实际问题。

为什么前端需要处理Excel？

先说说场景。你可能遇到过这些需求：

让用户下载Excel格式的报表
上传Excel文件并解析内容
在网页上直接编辑Excel数据
将JSON数据导出为Excel

这些场景下，纯前端方案比后端处理更轻量，用户体验更好。想象一下，用户上传Excel后立即看到解析结果，而不是等待服务器响应，这种即时反馈体验多棒！

SheetJS：轻量级的Excel处理专家

SheetJS（也叫xlsx.js）是这方面的老牌选手了。它最大的特点是轻量和兼容性好，支持.xls、.xlsx等多种格式。

基本使用

先看个读取Excel的例子：

// 全栈老李提示：使用SheetJS读取Excel文件
function handleFile(e) {
            
  const file = e.target.files[0];
  const reader = new FileReader();
  
  reader.onload = function(e) {
            
    const data = new Uint8Array(e.target.result);
    const workbook = XLSX.read(data, {
             type: 'array' });
    
    // 获取第一个工作表
    const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
    
    // 转换为JSON
    const jsonData = XLSX.utils.sheet_to_json(firstSheet);
    console.log(jsonData);
    
    // 全栈老李小技巧：可以用这个数据渲染表格
    renderTable(jsonData);
  };
  
  reader.readAsArrayBuffer(file);
}

document.getElementById('fileInput').addEventListener('change', handleFile);

导出Excel也很简单：

// 全栈老李示例：用SheetJS导出Excel
function exportToExcel() {
            
  const data = [
    {
             name: "张三", age: 25, city: "北京" },
    {
             name: "李四", age: 30, city: "上海" }
  ];
  
  const worksheet = XLSX.utils.json_to_sheet(data);
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, "员工表");
  
  // 生成Excel文件并下载
  XLSX.writeFile(workbook, "员工数据.xlsx");
}

SheetJS的特点

体积小：压缩后只有几十KB
格式支持广：能处理.xls、.xlsx、.csv等
API简洁：几个主要方法就能完成大部分操作
社区活跃：问题容易找到解决方案

但SheetJS对样式支持有限，如果你需要复杂的单元格样式、公式计算，可能需要考虑其他方案。

ExcelJS：功能全面的Excel操作库

ExcelJS是后起之秀，特点是功能全面，支持样式、公式、图片等高级特性。

基本使用

先看创建带样式的Excel：

// 全栈老李示例：用ExcelJS创建带样式的Excel
async function createStyledExcel() {
            
  const ExcelJS = require('exceljs');
  const workbook = new ExcelJS.Workbook();
  const worksheet = workbook.addWorksheet('销售数据');
  
  // 设置列宽和标题
  worksheet.columns = [
    {
             header: '产品', key: 'product', width: 20 },
    {
             header: '销量', key: 'sales', width: 10 }
  ];
  
  // 添加数据
  worksheet.addRow({
             product: 'iPhone', sales: 1000 });
  worksheet.addRow({
             product: 'MacBook', sales: 500 });
  
  // 设置样式
  worksheet.getRow(1).font = {
             bold: true, color: {
             argb: 'FF0000' } };
  worksheet.getColumn(2).numFmt = '#,##0';
  
  // 保存文件
  await workbook.xlsx.writeFile('销售报表.xlsx');
  console.log('文件已保存');
}

读取Excel并修改：

// 全栈老李示例：用ExcelJS读取并修改Excel
async function modifyExcel() {
            
  const ExcelJS = require('exceljs');
  const workbook = new ExcelJS.Workbook();
  
  await workbook.xlsx.readFile('销售报表.xlsx');
  const worksheet = workbook.getWorksheet(1);
  
  // 修改第二行数据
  const row = worksheet.getRow(2);
  row.getCell('sales').value = 1500;
  row.commit();
  
  // 添加新行
  worksheet.addRow({
             product: 'iPad', sales: 800 });
  
  await workbook.xlsx.writeFile('修改后的报表.xlsx');
}

ExcelJS的特点

样式支持丰富：字体、颜色、边框、对齐等
公式支持：可以设置和计算公式
流式处理：适合处理大文件
图表支持：能创建简单图表

但ExcelJS体积较大，压缩后约200KB，如果只需要基本功能可能有点重。

对比选型指南

特性	SheetJS	ExcelJS
体积	~40KB	~200KB
格式支持	.xls, .xlsx, csv	主要是.xlsx
样式支持	有限	丰富
公式	只读	读写
性能	快	较大文件稍慢
适用场景	简单数据导入导出	复杂报表生成

选型建议：

如果只需要简单读写，选SheetJS
如果需要复杂样式、公式，选ExcelJS
如果处理大文件，SheetJS性能更好
如果需要支持旧版.xls格式，SheetJS是唯一选择

实战技巧

1. 大文件分片处理

处理大Excel文件时，可以用Web Worker避免界面卡顿：

// 全栈老李提示：用Web Worker处理大Excel文件
const worker = new Worker('excel-worker.js');

worker.onmessage = function(e) {
            
  console.log('处理完成', e.data);
};

document.getElementById('fileInput').addEventListener('change', (e) => {
            
  const file = e.target.files[0];
  const reader = new FileReader();
  
  reader.onload = function(e) {
            
    worker.postMessage(e.target.result);
  };
  
  reader.readAsArrayBuffer(file);
});

2. 自定义导出样式

用ExcelJS创建专业报表：

// 全栈老李示例：专业报表样式
function createProfessionalReport() {
            
  const workbook = new ExcelJS.Workbook();
  const sheet = workbook.addWorksheet('季度报表');
  
  // 设置全局样式
  sheet.properties.defaultColWidth = 15;
  
  // 添加标题
  const titleRow = sheet.addRow(['2023年季度销售报表']);
  titleRow.font = {
             size: 16, bold: true };
  titleRow.height = 25;
  sheet.mergeCells('A1:D1');
  
  // 添加表头
  const headers = ['季度', '销售额', '同比增长', '备注'];
  const headerRow = sheet.addRow(headers);
  headerRow.eachCell(cell => {
            
    cell.fill = {
             type: 'pattern', pattern: 'solid', fgColor: {
             argb: 'FFD3D3D3' } };
    cell.border = {
             top: {
             style: 'thin' }, bottom: {
             style: 'thin' } };
  });
  
  // 添加数据...
}

课后作业：Excel数据处理器

来个小练习，检验下学习成果：

/**
 * 全栈老李的课后作业：
 * 实现一个函数，处理Excel数据并返回统计结果
 * @param {Array} data - Excel解析出的JSON数据
 * @return {Object} 统计结果
 * 
 * 示例输入: [
 *   { 产品: '手机', 销量: 100, 单价: 2000 },
 *   { 产品: '电脑', 销量: 50, 单价: 5000 }
 * ]
 * 
 * 示例输出: {
 *   totalSales: 150,         // 总销量
 *   totalRevenue: 450000,    // 总收入
 *   avgPrice: 3000,          // 平均单价
 *   products: ['手机', '电脑'] // 产品列表
 * }
 */
function analyzeExcelData(data) {
            
  // 你的代码实现
}

要求：

正确处理输入数据
返回指定格式的结果
考虑边界情况（如空数据）

把你的实现代码发在评论区吧！我会随机抽几位同学的答案进行点评～看看谁能写出最优雅的实现！