JavaScript中怎么解析excel文件

# 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 性能優化技巧

1. 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);
};

1. 虛擬滾動展示大數據：結合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 大文件處理策略

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;
  }
}

1. 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);

五、安全注意事項

1. 文件驗證：

   • 檢查文件擴展名和Magic Number
   • 限制文件大小

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

2. 內容消毒：

   • 防范公式注入（如以=開頭的單元格）

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

3. 內存保護：

   • 設置解析超時
   • 監控內存使用

六、完整示例項目

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 });
  }
});

七、性能對比與選型建議

選型建議： - 簡單讀?。篠heetJS或node-xlsx - 復雜編輯：ExcelJS - 超大CSV：Papa Parse - 全功能支持：SheetJS Pro版

結語

JavaScript生態提供了豐富的Excel處理方案，從輕量級的CSV解析到完整的電子表格操作。開發者應根據具體需求選擇合適工具，同時注意安全性和性能優化。隨著Web Assembly技術的發展，未來瀏覽器端的Excel處理能力還將持續增強。

參考資源

1. SheetJS官方文檔
2. ExcelJS GitHub倉庫
3. Node-xlsx使用示例
4. OWASP文件上傳安全指南

”`