JavaScript中怎么解析excel文件

发布时间：2021-08-10 15:26:28 作者：Leah
来源：亿速云阅读：242

# JavaScript中怎么解析Excel文件

## 引言

在现代Web开发中，处理Excel文件是一个常见需求。无论是数据导入导出、报表生成还是数据分析，JavaScript提供了多种解决方案来解析Excel文件。本文将详细介绍在浏览器端和Node.js环境中解析Excel文件的完整方案，涵盖主流库的使用方法、性能优化和实际应用场景。

## 一、Excel文件格式基础

### 1.1 常见Excel格式
- **XLS**：Office 2003及更早版本的二进制格式
- **XLSX**：Office 2007引入的基于XML的开放格式（OXML）
- **CSV**：纯文本逗号分隔值格式（虽非Excel专属但常关联）

### 1.2 技术选型考虑因素
- 文件大小限制
- 浏览器兼容性要求
- 是否需要写入能力
- 性能要求

## 二、浏览器端解析方案

### 2.1 SheetJS (xlsx.js)

#### 安装
```html
<script src="https://cdn.sheetjs.com/xlsx-0.19.3/package/dist/xlsx.full.min.js"></script>

基础解析示例

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);
  };
  
  reader.readAsArrayBuffer(file);
}

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

高级功能

处理日期单元格：cellDates: true 参数
设置解析选项：sheetStubs、blankrows等
大数据量分块处理

2.2 ExcelJS（浏览器版）

适用于需要编辑能力的场景：

import ExcelJS from 'exceljs/dist/exceljs.min.js';

async function parseExcel(file) {
  const buffer = await file.arrayBuffer();
  const workbook = new ExcelJS.Workbook();
  await workbook.xlsx.load(buffer);
  
  workbook.eachSheet((worksheet) => {
    worksheet.eachRow((row, rowNumber) => {
      console.log(`Row ${rowNumber}:`, row.values);
    });
  });
}

2.3 性能优化技巧

Web Worker处理大文件：

// main.js
const worker = new Worker('excel-worker.js');
worker.postMessage(file);
worker.onmessage = (e) => console.log(e.data);

// excel-worker.js
self.importScripts('https://cdn.sheetjs.com/xlsx-0.19.3/package/dist/xlsx.full.min.js');
self.onmessage = (e) => {
  const workbook = XLSX.read(e.data);
  // ...处理逻辑
  self.postMessage(result);
};

虚拟滚动展示大数据：结合React/Vue等框架的虚拟滚动组件

三、Node.js环境解析方案

3.1 SheetJS (Node版)

安装

npm install xlsx

文件解析

const XLSX = require('xlsx');
const fs = require('fs');

// 读取文件
const workbook = XLSX.readFile('data.xlsx');

// 流式处理大文件
const stream = XLSX.stream.to_json(
  XLSX.read(fs.createReadStream('large.xlsx'), { type: 'buffer' })
);

stream.on('data', (data) => console.log(data));

3.2 node-xlsx

专注于简单表格处理的轻量方案：

const xlsx = require('node-xlsx');
const workSheets = xlsx.parse('./test.xlsx');

workSheets.forEach(sheet => {
  console.log(`Sheet: ${sheet.name}`);
  sheet.data.forEach(row => console.log(row));
});

3.3 数据库导入示例（MongoDB）

const mongoose = require('mongoose');
const XLSX = require('xlsx');

async function importToMongo(filePath) {
  const workbook = XLSX.readFile(filePath);
  const jsonData = XLSX.utils.sheet_to_json(
    workbook.Sheets[workbook.SheetNames[0]]
  );
  
  await mongoose.connect('mongodb://localhost:27017/mydb');
  const Model = mongoose.model('Data', new mongoose.Schema({/*...*/}));
  
  await Model.insertMany(jsonData);
}

四、特殊场景处理

4.1 大文件处理策略

分片读取：

const CHUNK_SIZE = 1024 * 1024; // 1MB

async function* chunkFileReader(file) {
  let offset = 0;
  while (offset < file.size) {
    const chunk = file.slice(offset, offset + CHUNK_SIZE);
    yield await chunk.arrayBuffer();
    offset += CHUNK_SIZE;
  }
}

SAX模式解析（类似XML的流式解析）

4.2 样式信息提取

使用exceljs获取单元格样式：

worksheet.eachRow((row) => {
  row.eachCell((cell) => {
    console.log('Font:', cell.font);
    console.log('Fill:', cell.fill);
  });
});

4.3 多语言编码处理

处理CSV时的编码问题：

const iconv = require('iconv-lite');
const csv = iconv.decode(fs.readFileSync('gbk.csv'), 'gbk');
const data = Papa.parse(csv);

五、安全注意事项

文件验证：

检查文件扩展名和Magic Number
限制文件大小

if (!file.name.match(/\.(xlsx|xls|csv)$/i)) {
 throw new Error('Invalid file type');
}

内容消毒：

防范公式注入（如以=开头的单元格）

function sanitizeValue(value) {
 return typeof value === 'string' && value.startsWith('=') 
   ? value.replace(/^=/, "'=") 
   : value;
}

内存保护：
- 设置解析超时
- 监控内存使用

六、完整示例项目

6.1 前端数据导入系统

// Vue组件示例
export default {
  methods: {
    async importData(file) {
      try {
        const workbook = XLSX.read(await file.arrayBuffer());
        const sheet = workbook.Sheets[workbook.SheetNames[0]];
        const data = XLSX.utils.sheet_to_json(sheet, {
          header: ['id', 'name', 'value'], // 指定列映射
          range: 1 // 跳过标题行
        });
        
        const validData = data.filter(item => 
          item.id && item.name
        );
        
        await this.$store.dispatch('importData', validData);
      } catch (e) {
        this.$notify.error('解析失败: ' + e.message);
      }
    }
  }
}

6.2 Node.js数据转换服务

const express = require('express');
const multer = require('multer');
const XLSX = require('xlsx');

const app = express();
const upload = multer({ limits: { fileSize: 5 * 1024 * 1024 } });

app.post('/convert', upload.single('excel'), (req, res) => {
  try {
    const workbook = XLSX.read(req.file.buffer);
    const csv = XLSX.utils.sheet_to_csv(
      workbook.Sheets[workbook.SheetNames[0]]
    );
    res.type('text/csv').send(csv);
  } catch (e) {
    res.status(400).json({ error: e.message });
  }
});

七、性能对比与选型建议

库名称	体积	功能完整性	大文件支持	写入能力
SheetJS	中等	★★★★★	★★★★	★★★★★
ExcelJS	较大	★★★★☆	★★★	★★★★★
node-xlsx	小	★★★☆☆	★★	★★★☆☆
Papa Parse	小	★★☆☆☆	★★★★★	无

选型建议： - 简单读取：SheetJS或node-xlsx - 复杂编辑：ExcelJS - 超大CSV：Papa Parse - 全功能支持：SheetJS Pro版

结语

JavaScript生态提供了丰富的Excel处理方案，从轻量级的CSV解析到完整的电子表格操作。开发者应根据具体需求选择合适工具，同时注意安全性和性能优化。随着Web Assembly技术的发展，未来浏览器端的Excel处理能力还将持续增强。

参考资源

”`