Vue項目中使用xlsx庫解析Excel文件的完整指南

更新時間：2026年01月18日 11:36:11 作者：安逸點

這篇文章主要介紹了如何使用xlsx庫實現(xiàn)前端批量導入Excel文件的功能,包括使用FileReader讀取文件、使用XLSX.read()方法解析Excel數(shù)據(jù)、驗證表頭格式和提取數(shù)據(jù)行,需要的朋友可以參考下

前言

項目中有個需求是上傳Excel實現(xiàn)批量導入，但是解析Excel的需要前端來實現(xiàn)，所以用到了xlsx庫

xlsx 庫是一個強大的 JavaScript 庫，用于處理 Excel 文件，支持：

讀取 .xls 和 .xlsx 格式
寫入 Excel 文件
解析工作表數(shù)據(jù)
支持多種數(shù)據(jù)格式轉(zhuǎn)換

在項目中安裝 xlsx 庫：

npm install xlsx
# 或者使用 yarn
yarn add xlsx
# 或者使用 pnpm
pnpm add xlsx

核心 API

import * as XLSX from 'xlsx';

// 主要方法
XLSX.read(data, options)      // 讀取 Excel 數(shù)據(jù)
XLSX.readFile(filename)       // 從文件讀取
XLSX.utils.sheet_to_json()    // 工作表轉(zhuǎn) JSON
XLSX.utils.sheet_to_csv()     // 工作表轉(zhuǎn) CSV
XLSX.utils.sheet_to_html()    // 工作表轉(zhuǎn) HTML

Excel 文件讀取與解析

1. 使用 FileReader 讀取文件

在瀏覽器環(huán)境中，我們需要使用 FileReader API 來讀取用戶上傳的文件：

const readExcelFile = (file) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    
    reader.onload = (e) => {
      try {
        // 讀取文件內(nèi)容
        const data = new Uint8Array(e.target.result);
        resolve(data);
      } catch (error) {
        reject(new Error('文件讀取失敗'));
      }
    };
    
    reader.onerror = () => {
      reject(new Error('文件讀取失敗'));
    };
    
    // 以 ArrayBuffer 格式讀取文件
    reader.readAsArrayBuffer(file);
  });
};

2. 解析 Excel 文件

使用 XLSX.read() 方法解析 Excel 數(shù)據(jù)：

const parseExcelData = (data) => {
  // 讀取 Excel 工作簿
  const workbook = XLSX.read(data, { type: 'array' });
  
  // 獲取所有工作表名稱
  const sheetNames = workbook.SheetNames;
  console.log('工作表名稱:', sheetNames);
  
  // 獲取第一個工作表
  const firstSheetName = sheetNames[0];
  const worksheet = workbook.Sheets[firstSheetName];
  
  // 將工作表轉(zhuǎn)換為 JSON
  const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
  
  return {
    workbook,
    worksheet,
    jsonData,
    sheetNames
  };
};

3. 不同數(shù)據(jù)格式的轉(zhuǎn)換

// 轉(zhuǎn)換為 JSON 對象（帶表頭）
const jsonWithHeaders = XLSX.utils.sheet_to_json(worksheet);

// 轉(zhuǎn)換為 JSON 數(shù)組（不帶表頭）
const jsonArray = XLSX.utils.sheet_to_json(worksheet, { header: 1 });

// 轉(zhuǎn)換為 CSV 字符串
const csvString = XLSX.utils.sheet_to_csv(worksheet);

// 轉(zhuǎn)換為 HTML 表格
const htmlString = XLSX.utils.sheet_to_html(worksheet);

表頭驗證與數(shù)據(jù)提取

1. 驗證表頭格式

在實際應用中，我們通常需要驗證 Excel 文件的表頭是否符合預期格式：

const validateExcelHeaders = (jsonData, requiredHeaders) => {
  if (jsonData.length === 0) {
    throw new Error('Excel文件為空');
  }
  
  // 獲取表頭行（第一行）
  const headers = jsonData[0].map(header => 
    header ? header.toString().trim() : ''
  );
  
  // 檢查必需表頭
  const missingHeaders = requiredHeaders.filter(header =>
    !headers.includes(header)
  );
  
  if (missingHeaders.length > 0) {
    throw new Error(`缺少必需表頭: ${missingHeaders.join(', ')}`);
  }
  
  return headers;
};

2. 提取數(shù)據(jù)行

const extractDataRows = (jsonData, headers) => {
  // 跳過表頭行（第一行）
  const dataRows = jsonData.slice(1);
  
  return dataRows.map((row, rowIndex) => {
    const rowData = {};
    
    headers.forEach((header, colIndex) => {
      rowData[header] = row[colIndex] || '';
    });
    
    return {
      ...rowData,
      _rowNumber: rowIndex + 2 // Excel 行號（從1開始，表頭為第1行）
    };
  }).filter(row => {
    // 過濾空行（所有單元格都為空）
    return Object.values(row).some(value => 
      value !== '' && value !== undefined && value !== null
    );
  });
};

3. 數(shù)據(jù)驗證與清洗

const validateAndCleanData = (dataRows, validationRules) => {
  const errors = [];
  const cleanedData = [];
  
  dataRows.forEach((row, index) => {
    const rowErrors = [];
    
    // 檢查每個字段
    Object.keys(validationRules).forEach(field => {
      const value = row[field];
      const rules = validationRules[field];
      
      // 必填驗證
      if (rules.required && (!value || value.toString().trim() === '')) {
        rowErrors.push(`${field} 不能為空`);
      }
      
      // 類型驗證
      if (value && rules.type) {
        if (rules.type === 'number' && isNaN(Number(value))) {
          rowErrors.push(`${field} 必須是數(shù)字`);
        }
        if (rules.type === 'email' && !isValidEmail(value)) {
          rowErrors.push(`${field} 格式不正確`);
        }
      }
      
      // 枚舉值驗證
      if (value && rules.enum && !rules.enum.includes(value)) {
        rowErrors.push(`${field} 必須是以下值之一: ${rules.enum.join(', ')}`);
      }
    });
    
    if (rowErrors.length === 0) {
      cleanedData.push(row);
    } else {
      errors.push({
        row: row._rowNumber,
        errors: rowErrors
      });
    }
  });
  
  return { cleanedData, errors };
};

到此這篇關(guān)于Vue項目中使用xlsx庫解析Excel文件的完整指南的文章就介紹到這了,更多相關(guān)Vue xlsx解析Excel內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: