簡(jiǎn)介：在前端開(kāi)發(fā)中，JavaScript通過(guò)“js-xlsx”庫(kù)實(shí)現(xiàn)Excel文件的解析與數(shù)據(jù)提取，支持從用戶(hù)上傳的.xlsx文件中讀取內(nèi)容并轉(zhuǎn)換為JavaScript可操作的數(shù)據(jù)結(jié)構(gòu)。本文介紹該庫(kù)的基本使用流程，包括安裝、文件讀取、工作表解析、數(shù)據(jù)轉(zhuǎn)換與處理，并提供完整示例代碼，適用于需要在前端實(shí)現(xiàn)Excel數(shù)據(jù)處理的應(yīng)用場(chǎng)景。

1. 前端讀取Excel文件的需求背景

隨著Web應(yīng)用功能的不斷拓展，前端直接處理Excel文件的需求日益增長(zhǎng)。在數(shù)據(jù)導(dǎo)入、報(bào)表預(yù)覽、用戶(hù)信息上傳等業(yè)務(wù)場(chǎng)景中，Excel因其結(jié)構(gòu)清晰、操作便捷，成為企業(yè)數(shù)據(jù)交互的重要載體。傳統(tǒng)做法是將文件上傳至后端處理，但這種方式增加了 服務(wù)器負(fù)擔(dān)，響應(yīng)速度受限。隨著JavaScript技術(shù)的成熟，特別是在File API和相關(guān)庫(kù)（如js-xlsx）的支持下，瀏覽器端讀取和解析Excel文件已成為現(xiàn)實(shí)。這不僅提升了應(yīng)用響應(yīng)速度，也優(yōu)化了用戶(hù)體驗(yàn)，為前端工程師帶來(lái)了全新的技術(shù)挑戰(zhàn)與實(shí)踐機(jī)會(huì)。

2. js-xlsx庫(kù)簡(jiǎn)介與安裝方法

2.1 js-xlsx庫(kù)概述

2.1.1 什么是js-xlsx

js-xlsx 是一個(gè)由SheetJS開(kāi)發(fā)的開(kāi)源JavaScript庫(kù)，用于在前端或Node.js環(huán)境中讀寫(xiě)Excel文件（支持 .xls 和 .xlsx 格式）。該庫(kù)功能強(qiáng)大，支持多種Excel格式的解析與生成，能夠?qū)xcel文件轉(zhuǎn)換為JSON、CSV、HTML等結(jié)構(gòu)化數(shù)據(jù)格式，廣泛應(yīng)用于Web應(yīng)用中的數(shù)據(jù)導(dǎo)入導(dǎo)出場(chǎng)景。

其核心優(yōu)勢(shì)在于：

• 純JavaScript實(shí)現(xiàn) ，無(wú)需依賴(lài)任何其他庫(kù)（如jQuery）。
• 跨平臺(tái)兼容 ，支持瀏覽器端與Node.js環(huán)境。
• 輕量級(jí) ，壓縮后體積小，適合嵌入到生產(chǎn)環(huán)境。
• 豐富的API接口 ，可靈活處理Excel中的Sheet、Cell、樣式、公式等內(nèi)容。

2.1.2 js-xlsx的核心功能

以下是 js-xlsx 的核心功能模塊及其作用：

此外， js-xlsx 還支持多種格式的導(dǎo)出，包括CSV、HTML表格、ODS等。其靈活性使其成為前端Excel操作的首選庫(kù)之一。

2.2 js-xlsx的安裝與引入方式

2.2.1 使用npm安裝js-xlsx

對(duì)于使用模塊化構(gòu)建工具（如Webpack、Vite、Rollup等）的現(xiàn)代前端項(xiàng)目，推薦使用npm方式安裝：

npm install xlsx

安裝完成后，在JavaScript文件中通過(guò) import 引入：

import * as XLSX from 'xlsx';

注意 ：部分構(gòu)建工具可能需要額外配置，例如在Vue或React項(xiàng)目中確保  xlsx  被正確打包。

示例代碼：讀取并解析Excel文件

import * as XLSX from 'xlsx';

function handleFile(file) {
  const reader = new FileReader();
  reader.onload = function(e) {
    const data = new Uint8Array(e.target.result);
    const workbook = XLSX.read(data, { type: 'array' });
    const firstSheetName = workbook.SheetNames[0];
    const worksheet = workbook.Sheets[firstSheetName];
    const json = XLSX.utils.sheet_to_json(worksheet);
    console.log(json);
  };
  reader.readAsArrayBuffer(file);
}

代碼邏輯說(shuō)明 ：
1. 使用  FileReader  讀取用戶(hù)上傳的Excel文件。
2. 通過(guò)  XLSX.read  將文件內(nèi)容轉(zhuǎn)換為  workbook  對(duì)象。
3. 獲取第一個(gè)工作表并通過(guò)  sheet_to_json  轉(zhuǎn)換為JSON格式。

2.2.2 在HTML中直接引入CDN鏈接

對(duì)于不使用模塊化構(gòu)建的簡(jiǎn)單項(xiàng)目或靜態(tài)頁(yè)面，可以通過(guò)CDN引入 js-xlsx ：

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>

此方式無(wú)需任何構(gòu)建步驟，直接在瀏覽器中使用全局變量 XLSX 。

示例代碼：HTML中使用CDN引入并讀取Excel

<input type="file" id="excel-file" accept=".xlsx, .xls" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<script>
  document.getElementById('excel-file').addEventListener('change', function(e) {
    const file = e.target.files[0];
    const reader = new FileReader();
    reader.onload = function(evt) {
      const data = new Uint8Array(evt.target.result);
      const workbook = XLSX.read(data, { type: 'array' });
      const sheetName = workbook.SheetNames[0];
      const sheet = workbook.Sheets[sheetName];
      const jsonData = XLSX.utils.sheet_to_json(sheet);
      console.log(jsonData);
    };
    reader.readAsArrayBuffer(file);
  });
</script>

代碼邏輯說(shuō)明 ：
1. 監(jiān)聽(tīng)文件選擇框的  change  事件，獲取文件對(duì)象。
2. 使用  FileReader  讀取文件內(nèi)容。
3. 使用  XLSX.read  解析文件為工作簿對(duì)象。
4. 提取第一個(gè)工作表，并轉(zhuǎn)換為JSON數(shù)組。

2.2.3 模塊化開(kāi)發(fā)中的導(dǎo)入方式

在使用模塊化框架（如Vue、React、Angular）時(shí)，建議使用 import 方式引入 xlsx ，以便更好地管理依賴(lài)與打包體積。

Vue項(xiàng)目示例：

<template>
  <input type="file" @change="handleFileUpload" accept=".xlsx, .xls" />
</template>

<script>
import * as XLSX from 'xlsx';

export default {
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[0];
      const reader = new FileReader();
      reader.onload = (e) => {
        const data = new Uint8Array(e.target.result);
        const workbook = XLSX.read(data, { type: 'array' });
        const sheetName = workbook.SheetNames[0];
        const sheet = workbook.Sheets[sheetName];
        const jsonData = XLSX.utils.sheet_to_json(sheet);
        console.log(jsonData);
      };
      reader.readAsArrayBuffer(file);
    }
  }
}
</script>

代碼邏輯說(shuō)明 ：
1. 在Vue組件中綁定文件上傳事件。
2. 使用  XLSX  庫(kù)讀取Excel文件并解析為JSON。
3. 打印解析結(jié)果到控制臺(tái)。

2.3 js-xlsx的兼容性與注意事項(xiàng)

2.3.1 瀏覽器兼容性分析

js-xlsx 支持現(xiàn)代瀏覽器和IE11（部分功能需polyfill）。以下為兼容性表格：

兼容性建議 ：
- 對(duì)于IE11環(huán)境，建議引入  xlsx.core.min.js  并使用  FileReader  polyfill。
- 使用  XLSX.set_cptable  以支持中文字符的正確解析。

2.3.2 常見(jiàn)問(wèn)題及解決方案

問(wèn)題1：讀取文件時(shí)提示 Not a valid zip 錯(cuò)誤

原因 ：上傳的文件格式不被支持或文件損壞。

解決方案 ：
- 檢查文件是否為 .xls 或 .xlsx 格式。
- 確保文件未損壞，嘗試使用Excel重新保存文件。
- 使用 try-catch 捕獲異常：

try {
  const workbook = XLSX.read(data, { type: 'array' });
} catch (error) {
  console.error("Excel文件解析失?。?, error);
}

問(wèn)題2：讀取中文內(nèi)容亂碼

原因 ： js-xlsx 默認(rèn)不處理字符編碼，某些Excel文件可能包含非UTF-8編碼。

解決方案 ：
使用 cptable 插件處理編碼轉(zhuǎn)換：

import * as XLSX from 'xlsx';
import cptable from 'xlsx/dist/cpexcel.full.js';

XLSX.set_cptable(cptable);

function handleFile(file) {
  const reader = new FileReader();
  reader.onload = function(e) {
    const data = new Uint8Array(e.target.result);
    const workbook = XLSX.read(data, { type: 'array' });
    const sheet = workbook.Sheets[workbook.SheetNames[0]];
    const json = XLSX.utils.sheet_to_json(sheet);
    console.log(json);
  };
  reader.readAsArrayBuffer(file);
}

問(wèn)題3：處理大文件時(shí)卡頓或崩潰

原因 ： js-xlsx 是同步解析庫(kù)，處理大文件時(shí)可能阻塞主線(xiàn)程。

解決方案 ：
- 使用 Web Worker 異步處理大文件解析。
- 分頁(yè)讀取或限制讀取的Sheet數(shù)量。
- 前端提示用戶(hù)上傳文件大小限制。

流程圖：js-xlsx文件讀取流程

graph TD
    A[用戶(hù)選擇Excel文件] --> B[通過(guò)FileReader讀取文件]
    B --> C{判斷文件類(lèi)型}
    C -->| .xls | D[XLSX.read解析文件]
    C -->| .xlsx | D
    D --> E[獲取Workbook對(duì)象]
    E --> F[獲取SheetNames數(shù)組]
    F --> G[訪(fǎng)問(wèn)指定Sheet對(duì)象]
    G --> H[XLSX.utils.sheet_to_json轉(zhuǎn)換數(shù)據(jù)]
    H --> I[輸出JSON數(shù)組]

該流程圖清晰地展示了 js-xlsx 從文件選擇到最終數(shù)據(jù)解析的完整流程，有助于開(kāi)發(fā)者理解其工作原理。

本章內(nèi)容完整地介紹了 js-xlsx 的基本概念、安裝方式及兼容性問(wèn)題，為后續(xù)章節(jié)深入解析Excel數(shù)據(jù)結(jié)構(gòu)和處理邏輯打下了堅(jiān)實(shí)基礎(chǔ)。

3. 使用XLSX.readFile讀取Excel文件

在前端開(kāi)發(fā)中，處理Excel文件已成為一種常見(jiàn)需求，尤其在數(shù)據(jù)導(dǎo)入、報(bào)表展示等場(chǎng)景中。 XLSX.readFile 是 js-xlsx （也稱(chēng) SheetJS ）庫(kù)提供的一個(gè)核心方法，用于從本地文件系統(tǒng)讀取 Excel 文件。本章將詳細(xì)介紹如何結(jié)合 HTML5 的 input 元素獲取用戶(hù)上傳的文件對(duì)象，并使用 XLSX.readFile 方法進(jìn)行讀取，同時(shí)對(duì)讀取后的數(shù)據(jù)結(jié)構(gòu)進(jìn)行初步解析。

3.1 通過(guò)input元素獲取文件對(duì)象

在 Web 應(yīng)用中，用戶(hù)通常通過(guò) <input type="file"> 元素上傳文件。HTML5 提供了 File API ，使前端可以訪(fǎng)問(wèn)用戶(hù)選擇的本地文件內(nèi)容。

3.1.1 HTML5中File API的基礎(chǔ)知識(shí)

HTML5 的 File API 是一組用于處理本地文件的接口，主要包括：

• File ：表示一個(gè)文件對(duì)象。
• FileList ：表示一組 File 對(duì)象，通常由 <input type="file"> 元素返回。
• FileReader ：用于異步讀取文件內(nèi)容。

使用這些 API，前端可以訪(fǎng)問(wèn)用戶(hù)上傳的文件內(nèi)容，并將其傳遞給 js-xlsx 進(jìn)行解析。

3.1.2 事件監(jiān)聽(tīng)與文件讀取

我們可以為 <input type="file"> 元素綁定 change 事件監(jiān)聽(tīng)器，當(dāng)用戶(hù)選擇文件后觸發(fā)文件讀取操作。

<input type="file" id="excelFile" accept=".xlsx,.xls" />

document.getElementById('excelFile').addEventListener('change', function(e) {
    const file = e.target.files[0];  // 獲取用戶(hù)選擇的第一個(gè)文件
    if (file) {
        const reader = new FileReader();  // 創(chuàng)建FileReader對(duì)象
        reader.onload = function(event) {
            const data = new Uint8Array(event.target.result);  // 轉(zhuǎn)換為二進(jìn)制數(shù)組
            const workbook = XLSX.read(data, { type: 'array' });  // 使用js-xlsx解析
            console.log(workbook);  // 輸出解析后的workbook對(duì)象
        };
        reader.readAsArrayBuffer(file);  // 以ArrayBuffer形式讀取文件
    }
});

注意：  FileReader.readAsArrayBuffer()  是讀取 Excel 文件的推薦方式，因?yàn)?Excel 文件是二進(jìn)制格式。

代碼邏輯分析

• 第 1 行 ：為 <input> 元素綁定 change 事件監(jiān)聽(tīng)器。
• 第 2 行 ：通過(guò) e.target.files[0] 獲取用戶(hù)選擇的第一個(gè)文件。
• 第 4 行 ：創(chuàng)建 FileReader 實(shí)例，用于異步讀取文件。
• 第 5 行 ：定義 onload 事件回調(diào)，當(dāng)文件讀取完成后執(zhí)行。
• 第 6 行 ：將 result 轉(zhuǎn)換為 Uint8Array ，以便傳給 XLSX.read() 。
• 第 7 行 ：調(diào)用 XLSX.read() 方法解析 Excel 文件。
• 第 10 行 ：以 ArrayBuffer 格式讀取文件內(nèi)容。

3.2 XLSX.readFile方法詳解

XLSX.readFile 是 js-xlsx 提供的另一個(gè)便捷方法，可以直接傳入文件路徑或文件對(duì)象進(jìn)行解析，尤其適用于 Node.js 環(huán)境或 Electron 應(yīng)用。

3.2.1 參數(shù)說(shuō)明與使用方式

常見(jiàn)配置選項(xiàng)：

示例代碼

const workbook = XLSX.readFile('data.xlsx', {
    type: 'file',
    cellDates: true
});
console.log(workbook);

代碼邏輯分析

• 第 1 行 ：調(diào)用 XLSX.readFile() 方法讀取本地路徑為 data.xlsx 的文件。
• 第 2 行 ：指定讀取類(lèi)型為 file ，即直接讀取文件路徑。
• 第 3 行 ：將日期單元格轉(zhuǎn)換為 Date 對(duì)象，便于后續(xù)處理。

注意：  XLSX.readFile()  在瀏覽器中使用時(shí)需確保文件路徑有效，通常用于 Electron 或本地文件系統(tǒng)環(huán)境。

3.2.2 讀取不同格式的Excel文件（.xls與.xlsx）

js-xlsx 支持讀取 .xls （Excel 2003）和 .xlsx （Excel 2007 及以上）兩種格式，無(wú)需額外配置。

支持格式對(duì)比表：

示例流程圖（mermaid）

graph TD
    A[用戶(hù)選擇Excel文件] --> B{判斷文件擴(kuò)展名}
    B -->| .xls | C[使用XLSX.readFile讀取]
    B -->| .xlsx | D[使用XLSX.readFile讀取]
    C --> E[解析為Workbook對(duì)象]
    D --> E
    E --> F[輸出解析結(jié)果]

3.3 文件讀取后的數(shù)據(jù)結(jié)構(gòu)初步解析

當(dāng) Excel 文件被成功讀取后， XLSX.readFile 返回一個(gè) workbook 對(duì)象，該對(duì)象包含了整個(gè) Excel 文件的數(shù)據(jù)結(jié)構(gòu)。

3.3.1 Workbook對(duì)象的結(jié)構(gòu)

workbook 對(duì)象是一個(gè) JavaScript 對(duì)象，其結(jié)構(gòu)如下：

{
  SheetNames: ['Sheet1', 'Sheet2'],
  Sheets: {
    Sheet1: { '!ref': 'A1:D10', A1: { v: 'Header1', t: 's' }, ... },
    Sheet2: { '!ref': 'A1:C5', A1: { v: 'Data1', t: 's' }, ... }
  },
  Props: { ... },
  Custprops: { ... }
}

3.3.2 常用屬性與方法介紹

SheetNames 數(shù)組

SheetNames 是一個(gè)字符串?dāng)?shù)組，保存了 Excel 文件中所有工作表的名稱(chēng)。例如：

console.log(workbook.SheetNames); // ['Sheet1', 'Sheet2']

Sheets 對(duì)象

每個(gè)工作表數(shù)據(jù)以鍵值對(duì)形式存儲(chǔ)在 Sheets 對(duì)象中，例如：

const sheet = workbook.Sheets['Sheet1'];
console.log(sheet['A1']); // { v: 'Header1', t: 's' }

每個(gè)單元格數(shù)據(jù)對(duì)象包含以下屬性：

示例代碼

const sheetName = workbook.SheetNames[0];
const worksheet = workbook.Sheets[sheetName];

for (let i = 1; i <= 10; i++) {
    const cell = worksheet['A' + i];
    if (cell) {
        console.log(`A${i}:`, cell.v);
    }
}

代碼邏輯分析

• 第 1 行 ：獲取第一個(gè)工作表名稱(chēng)。
• 第 2 行 ：根據(jù)名稱(chēng)獲取工作表對(duì)象。
• 第 4 行 ：遍歷 A1 到 A10 單元格。
• 第 5 行 ：判斷單元格是否存在。
• 第 6 行 ：輸出單元格的值。

通過(guò)本章內(nèi)容，我們已經(jīng)掌握了如何使用 XLSX.readFile 方法讀取 Excel 文件，并對(duì)其返回的 workbook 對(duì)象進(jìn)行初步解析。下一章我們將深入探討 workbook 對(duì)象的內(nèi)部結(jié)構(gòu)，包括 SheetNames 、 Sheets 和單元格數(shù)據(jù)的具體表示方式。

4. 解析Workbook對(duì)象結(jié)構(gòu)

在使用 js-xlsx 庫(kù)讀取 Excel 文件后，返回的核心對(duì)象是一個(gè) Workbook 對(duì)象。該對(duì)象包含了文件中所有工作表（Sheet）的名稱(chēng)列表（SheetNames）以及各個(gè)工作表的數(shù)據(jù)結(jié)構(gòu)（Sheets）。為了有效提取和處理 Excel 文件中的數(shù)據(jù)，開(kāi)發(fā)者必須深入理解 Workbook 對(duì)象的結(jié)構(gòu)及其子對(duì)象的組織方式。本章將逐步解析 Workbook 的核心屬性與數(shù)據(jù)結(jié)構(gòu)，并通過(guò)代碼示例說(shuō)明如何遍歷和訪(fǎng)問(wèn)其中的數(shù)據(jù)。

4.1 Workbook對(duì)象的核心屬性

4.1.1 SheetNames數(shù)組的作用

SheetNames 是 Workbook 對(duì)象中的一個(gè)數(shù)組屬性，用于存儲(chǔ) Excel 文件中所有工作表的名稱(chēng)。Excel 文件通常包含多個(gè)工作表（Sheet），例如“Sheet1”、“Sheet2”等。在前端處理文件時(shí)，通常需要根據(jù)名稱(chēng)動(dòng)態(tài)訪(fǎng)問(wèn)特定的工作表。

const workbook = XLSX.readFile('example.xlsx');
console.log(workbook.SheetNames);
// 輸出類(lèi)似 ["Sheet1", "Sheet2"]

代碼邏輯分析：

• XLSX.readFile('example.xlsx') ：讀取本地 Excel 文件，返回一個(gè) Workbook 對(duì)象。
• workbook.SheetNames ：訪(fǎng)問(wèn) Workbook 中的 SheetNames 屬性，它是一個(gè)數(shù)組，包含所有工作表的名稱(chēng)。
• console.log(...) ：將名稱(chēng)數(shù)組輸出到控制臺(tái)，便于開(kāi)發(fā)者查看和調(diào)試。

4.1.2 Sheets對(duì)象的組成與結(jié)構(gòu)

Sheets 是 Workbook 對(duì)象中另一個(gè)核心屬性，它是一個(gè)對(duì)象（Object），鍵（Key）為工作表名稱(chēng)，值（Value）為對(duì)應(yīng)的工作表對(duì)象（Sheet Object）。每個(gè) Sheet 對(duì)象中存儲(chǔ)了該工作表中所有單元格的數(shù)據(jù)及其格式信息。

const sheetNames = workbook.SheetNames;
const sheets = workbook.Sheets;

sheetNames.forEach(sheetName => {
    const sheet = sheets[sheetName];
    console.log(`Sheet: ${sheetName}`, sheet);
});

代碼邏輯分析：

• workbook.Sheets ：獲取 Workbook 中的所有工作表對(duì)象。
• sheetNames.forEach(...) ：遍歷所有工作表名稱(chēng)。
• sheets[sheetName] ：通過(guò)名稱(chēng)訪(fǎng)問(wèn)對(duì)應(yīng)的 Sheet 對(duì)象。
• console.log(...) ：輸出每個(gè) Sheet 對(duì)象的內(nèi)容，幫助開(kāi)發(fā)者理解其內(nèi)部結(jié)構(gòu)。

4.2 Sheet對(duì)象的數(shù)據(jù)結(jié)構(gòu)解析

4.2.1 單元格數(shù)據(jù)的表示方式（A1、B2等）

在 js-xlsx 中，Sheet 對(duì)象的每個(gè)單元格由其地址（如 A1、B2 等）作為鍵進(jìn)行存儲(chǔ)。每個(gè)單元格數(shù)據(jù)以對(duì)象形式存儲(chǔ)，包含 .v （值）、 .t （類(lèi)型）、 .w （顯示值）等字段。

const sheet = workbook.Sheets['Sheet1'];
const cellA1 = sheet['A1'];
console.log(cellA1);

輸出示例：

{
  "v": "姓名",
  "t": "s",
  "w": "姓名"
}

參數(shù)說(shuō)明：

• v ：?jiǎn)卧竦膶?shí)際值（value）。
• t ：?jiǎn)卧竦臄?shù)據(jù)類(lèi)型（s 表示字符串，n 表示數(shù)字，d 表示日期等）。
• w ：?jiǎn)卧竦娘@示格式值（formatted value）。

4.2.2 各類(lèi)型數(shù)據(jù)的存儲(chǔ)格式（數(shù)值、字符串、日期等）

不同類(lèi)型的單元格數(shù)據(jù)在 Sheet 對(duì)象中以不同的方式存儲(chǔ)，開(kāi)發(fā)者需要根據(jù)類(lèi)型字段 .t 來(lái)判斷如何處理數(shù)據(jù)。

代碼示例：根據(jù)類(lèi)型解析單元格內(nèi)容

function getCellValue(cell) {
    if (!cell) return '';
    switch(cell.t) {
        case 's': // 字符串
            return cell.v;
        case 'n': // 數(shù)值
            return cell.v;
        case 'd': // 日期
            return cell.w;
        case 'b': // 布爾值
            return cell.v ? '是' : '否';
        case 'e': // 錯(cuò)誤
            return '錯(cuò)誤值: ' + cell.w;
        default:
            return '';
    }
}

邏輯分析：

• 函數(shù) getCellValue(cell) 接收一個(gè)單元格對(duì)象。
• 使用 switch 判斷 .t 類(lèi)型，返回對(duì)應(yīng)的值。
• 若單元格為空或未定義，返回空字符串。
• 對(duì)于日期類(lèi)型，使用 .w 獲取格式化字符串而非原始時(shí)間戳。

4.3 遍歷工作簿內(nèi)容

4.3.1 遍歷SheetNames獲取工作表名稱(chēng)

遍歷 SheetNames 是訪(fǎng)問(wèn)每個(gè)工作表的前提。通過(guò)名稱(chēng)訪(fǎng)問(wèn)對(duì)應(yīng)的 Sheet 對(duì)象，可以進(jìn)一步提取數(shù)據(jù)。

const workbook = XLSX.readFile('data.xlsx');
workbook.SheetNames.forEach((sheetName, index) => {
    console.log(`第 ${index + 1} 個(gè)工作表名稱(chēng)：${sheetName}`);
});

流程圖說(shuō)明：

graph TD
    A[開(kāi)始] --> B[讀取Excel文件]
    B --> C[獲取SheetNames數(shù)組]
    C --> D[遍歷數(shù)組]
    D --> E[輸出每個(gè)Sheet名稱(chēng)]
    E --> F[結(jié)束]

邏輯分析：

• 讀取 Excel 文件后，遍歷 SheetNames 數(shù)組。
• 使用 forEach 方法，傳入當(dāng)前名稱(chēng)與索引。
• 輸出每個(gè)工作表名稱(chēng)，便于后續(xù)訪(fǎng)問(wèn)。

4.3.2 動(dòng)態(tài)訪(fǎng)問(wèn)不同工作表的數(shù)據(jù)

在實(shí)際應(yīng)用中，常常需要根據(jù)用戶(hù)選擇或業(yè)務(wù)邏輯動(dòng)態(tài)訪(fǎng)問(wèn)不同工作表的數(shù)據(jù)。以下示例演示如何根據(jù)名稱(chēng)訪(fǎng)問(wèn)特定工作表并提取數(shù)據(jù)：

function getSheetData(sheetName) {
    const sheet = workbook.Sheets[sheetName];
    const data = [];

    const range = XLSX.utils.decode_range(sheet['!ref']);
    for (let row = range.s.r; row <= range.e.r; row++) {
        const rowData = [];
        for (let col = range.s.c; col <= range.e.c; col++) {
            const cellAddress = XLSX.utils.encode_cell({ r: row, c: col });
            const cell = sheet[cellAddress];
            rowData.push(getCellValue(cell));
        }
        data.push(rowData);
    }
    return data;
}

表格展示：函數(shù) getSheetData 返回結(jié)構(gòu)示例

邏輯分析：

• XLSX.utils.decode_range(sheet['!ref']) ：解析工作表的范圍，如 "A1:C3" 。
• 使用雙層循環(huán)遍歷行和列。
• 通過(guò) XLSX.utils.encode_cell 構(gòu)建單元格地址。
• 調(diào)用 getCellValue 提取數(shù)據(jù)。
• 將每行數(shù)據(jù)組合為二維數(shù)組返回。

通過(guò)本章內(nèi)容，我們深入解析了 Workbook 對(duì)象的核心屬性與結(jié)構(gòu)，掌握了 SheetNames 和 Sheets 的作用，并學(xué)會(huì)了如何遍歷和提取單元格數(shù)據(jù)。下一章我們將進(jìn)一步探討如何獲取工作表名稱(chēng)列表，并動(dòng)態(tài)訪(fǎng)問(wèn)具體的工作表內(nèi)容，為前端 Excel 數(shù)據(jù)處理打下堅(jiān)實(shí)基礎(chǔ)。

5. 獲取SheetNames與訪(fǎng)問(wèn)具體工作表

在前端使用 js-xlsx 讀取 Excel 文件后，開(kāi)發(fā)者通常需要對(duì)工作簿中的多個(gè)工作表進(jìn)行訪(fǎng)問(wèn)與處理。Excel 文件可以包含多個(gè)工作表（Sheet），每個(gè)工作表對(duì)應(yīng)不同的數(shù)據(jù)集或業(yè)務(wù)邏輯。本章將詳細(xì)介紹如何獲取 Excel 文件中所有工作表的名稱(chēng)，以及如何訪(fǎng)問(wèn)特定名稱(chēng)的工作表，并實(shí)現(xiàn)數(shù)據(jù)的動(dòng)態(tài)展示與切換。

5.1 獲取Excel文件中的所有工作表名稱(chēng)

5.1.1 SheetNames數(shù)組的讀取方法

在使用 js-xlsx 解析 Excel 文件后，會(huì)得到一個(gè) workbook 對(duì)象，其中包含了一個(gè)名為 SheetNames 的數(shù)組，該數(shù)組中存儲(chǔ)了該工作簿中所有工作表的名稱(chēng)。

const workbook = XLSX.read(data, { type: 'array' });
const sheetNames = workbook.SheetNames;
console.log(sheetNames); // 輸出所有工作表名稱(chēng)，例如：["Sheet1", "Sheet2"]

代碼解析：
-  XLSX.read(data, { type: 'array' })  ：將二進(jìn)制數(shù)據(jù)  data  轉(zhuǎn)換為工作簿對(duì)象。
-  workbook.SheetNames  ：獲取所有工作表名稱(chēng)組成的數(shù)組。
-  console.log(sheetNames)  ：輸出工作表名稱(chēng)數(shù)組，用于調(diào)試或后續(xù)操作。

該數(shù)組可以用于生成工作表名稱(chēng)下拉框，或作為數(shù)據(jù)展示的入口。開(kāi)發(fā)者可以通過(guò)遍歷該數(shù)組，動(dòng)態(tài)獲取每個(gè)工作表的數(shù)據(jù)。

示例：遍歷SheetNames并展示名稱(chēng)

sheetNames.forEach((name, index) => {
    console.log(`工作表${index + 1}名稱(chēng)為：${name}`);
});

代碼邏輯說(shuō)明：
- 使用  forEach  遍歷  SheetNames  數(shù)組。
- 輸出每個(gè)工作表名稱(chēng)及其索引位置，便于后續(xù)選擇。

5.1.2 多工作表文件的處理策略

對(duì)于包含多個(gè)工作表的 Excel 文件，處理策略主要包括：

優(yōu)化建議：
- 對(duì)于大型 Excel 文件，推薦采用按需加載策略，避免一次性讀取所有數(shù)據(jù)導(dǎo)致性能下降。
- 可以結(jié)合前端組件（如 Tab 面板）實(shí)現(xiàn)多工作表切換。

5.2 訪(fǎng)問(wèn)指定名稱(chēng)的工作表

5.2.1 通過(guò)XLSX.utils.aoa_to_sheet解析Sheet對(duì)象

在獲取 workbook 后，可以通過(guò) workbook.Sheets[SheetName] 獲取對(duì)應(yīng)的工作表對(duì)象。該對(duì)象中包含了工作表的原始數(shù)據(jù)結(jié)構(gòu)，包括單元格地址與值的映射。

const sheetName = sheetNames[0]; // 獲取第一個(gè)工作表名稱(chēng)
const worksheet = workbook.Sheets[sheetName]; // 獲取工作表對(duì)象
console.log(worksheet);

參數(shù)說(shuō)明：
-  sheetNames[0]  ：表示第一個(gè)工作表的名稱(chēng)，如  "Sheet1"  。
-  worksheet  ：返回的工作表對(duì)象，結(jié)構(gòu)為  { '!ref': 'A1:C3', A1: { v: '標(biāo)題' }, B1: { v: 123 }, ... }  。

若需要將工作表數(shù)據(jù)轉(zhuǎn)換為二維數(shù)組，可以使用 XLSX.utils.sheet_to_json 或 XLSX.utils.sheet_to_aoa 方法：

const aoa = XLSX.utils.sheet_to_aoa(worksheet);
console.log(aoa);

代碼解析：
-  XLSX.utils.sheet_to_aoa(worksheet)  ：將工作表轉(zhuǎn)換為二維數(shù)組。
-  aoa  ：輸出為二維數(shù)組，如  [['標(biāo)題', '數(shù)值'], ['A', 10], ['B', 20]]  。

5.2.2 獲取Sheet的原始數(shù)據(jù)格式

工作表對(duì)象（Sheet）的原始數(shù)據(jù)結(jié)構(gòu)如下：

{
  "!ref": "A1:C3",
  "A1": { "t": "s", "v": "姓名" },
  "B1": { "t": "s", "v": "年齡" },
  "C1": { "t": "s", "v": "性別" },
  "A2": { "t": "s", "v": "張三" },
  "B2": { "t": "n", "v": 28 },
  "C2": { "t": "s", "v": "男" }
}

字段說(shuō)明：
-  !ref  ：表示數(shù)據(jù)范圍，這里是  A1:C3  。
-  t  ：表示單元格數(shù)據(jù)類(lèi)型，如：
-  's'  ：字符串（String）
-  'n'  ：數(shù)值（Number）
-  'd'  ：日期（Date）
-  v  ：表示單元格的值。

開(kāi)發(fā)者可以通過(guò)遍歷該結(jié)構(gòu)來(lái)手動(dòng)解析數(shù)據(jù)，或使用 XLSX.utils.sheet_to_json 方法進(jìn)行自動(dòng)轉(zhuǎn)換。

5.3 工作表數(shù)據(jù)的動(dòng)態(tài)展示

5.3.1 將工作表數(shù)據(jù)渲染至HTML表格

將 Excel 數(shù)據(jù)渲染為 HTML 表格是常見(jiàn)的需求。以下是一個(gè)完整的實(shí)現(xiàn)示例：

<table id="excelTable" border="1"></table>

function renderTable(sheetData) {
    const table = document.getElementById('excelTable');
    table.innerHTML = ''; // 清空舊數(shù)據(jù)

    // 遍歷二維數(shù)組
    sheetData.forEach(row => {
        const tr = document.createElement('tr');
        row.forEach(cell => {
            const td = document.createElement('td');
            td.textContent = cell;
            tr.appendChild(td);
        });
        table.appendChild(tr);
    });
}

// 示例：讀取第一個(gè)工作表并渲染
const sheetName = sheetNames[0];
const worksheet = workbook.Sheets[sheetName];
const aoa = XLSX.utils.sheet_to_aoa(worksheet);
renderTable(aoa);

代碼邏輯分析：
-  renderTable(sheetData)  ：接收二維數(shù)組，將其渲染為 HTML 表格。
-  sheetData.forEach(...)  ：遍歷每一行。
- 創(chuàng)建  tr  和  td  元素，填充單元格內(nèi)容。
- 最終將表格插入到頁(yè)面中。

5.3.2 支持多Sheet切換的前端實(shí)現(xiàn)

為了實(shí)現(xiàn)多工作表切換功能，可以添加下拉框讓用戶(hù)選擇工作表名稱(chēng)，然后動(dòng)態(tài)加載并渲染對(duì)應(yīng)數(shù)據(jù)。

<select id="sheetSelector"></select>
<table id="excelTable" border="1"></table>

const sheetSelector = document.getElementById('sheetSelector');

// 填充下拉框
sheetNames.forEach(name => {
    const option = document.createElement('option');
    option.value = name;
    option.textContent = name;
    sheetSelector.appendChild(option);
});

// 監(jiān)聽(tīng)下拉框變化
sheetSelector.addEventListener('change', () => {
    const selectedSheet = sheetSelector.value;
    const worksheet = workbook.Sheets[selectedSheet];
    const aoa = XLSX.utils.sheet_to_aoa(worksheet);
    renderTable(aoa);
});

代碼說(shuō)明：
- 使用  select  元素創(chuàng)建下拉框。
- 遍歷  sheetNames  ，為每個(gè)工作表名稱(chēng)創(chuàng)建一個(gè)  option  。
- 添加事件監(jiān)聽(tīng)器，當(dāng)下拉框選項(xiàng)改變時(shí)，重新加載并渲染對(duì)應(yīng)工作表數(shù)據(jù)。

流程圖：多Sheet切換實(shí)現(xiàn)邏輯

graph TD
    A[用戶(hù)選擇工作表] --> B[獲取工作表名稱(chēng)]
    B --> C[從workbook中獲取對(duì)應(yīng)Sheet]
    C --> D[轉(zhuǎn)換為二維數(shù)組]
    D --> E[渲染為HTML表格]

流程圖說(shuō)明：
- 用戶(hù)通過(guò)下拉框選擇工作表名稱(chēng)。
- 獲取該名稱(chēng)對(duì)應(yīng)的工作表對(duì)象。
- 將工作表數(shù)據(jù)轉(zhuǎn)換為二維數(shù)組。
- 渲染為 HTML 表格展示給用戶(hù)。

本章深入講解了如何獲取 Excel 文件中的所有工作表名稱(chēng)、訪(fǎng)問(wèn)指定工作表以及實(shí)現(xiàn)數(shù)據(jù)的動(dòng)態(tài)展示與切換。通過(guò) SheetNames 數(shù)組可以獲取所有工作表名稱(chēng)，結(jié)合 workbook.Sheets[name] 可以訪(fǎng)問(wèn)具體工作表的數(shù)據(jù)。此外，使用 XLSX.utils.sheet_to_aoa 可將數(shù)據(jù)轉(zhuǎn)換為二維數(shù)組，并結(jié)合 HTML 動(dòng)態(tài)渲染為表格。最后，通過(guò)下拉框?qū)崿F(xiàn)了多工作表切換功能，為后續(xù)的數(shù)據(jù)展示與交互奠定了基礎(chǔ)。

6. 使用sheet_to_json轉(zhuǎn)換數(shù)據(jù)為數(shù)組

在前端處理 Excel 文件的過(guò)程中，一個(gè)非常關(guān)鍵的步驟是將 Excel 中的工作表數(shù)據(jù)轉(zhuǎn)化為 JavaScript 可操作的格式。 sheet_to_json 是 js-xlsx 庫(kù)提供的一個(gè)核心方法，用于將 Sheet 對(duì)象轉(zhuǎn)換為 JSON 數(shù)組形式，便于后續(xù)的數(shù)據(jù)處理、展示或上傳。

6.1 sheet_to_json方法的基本用法

sheet_to_json 是 XLSX.utils 模塊下的一個(gè)工具函數(shù)，能夠?qū)⒁粋€(gè) Sheet 對(duì)象（即工作表）轉(zhuǎn)換為 JavaScript 數(shù)組對(duì)象。

6.1.1 參數(shù)配置與字段映射

const worksheet = workbook.Sheets[sheetName];
const jsonData = XLSX.utils.sheet_to_json(worksheet, {
  header: 1, // 設(shè)置第一行為表頭
  defval: null, // 空值用 null 填充
  raw: true // 禁止自動(dòng)轉(zhuǎn)換數(shù)據(jù)類(lèi)型
});

6.1.2 數(shù)據(jù)轉(zhuǎn)換的格式規(guī)范

當(dāng) header: 1 時(shí)， sheet_to_json 會(huì)將第一行作為字段名，后續(xù)每一行對(duì)應(yīng)一個(gè)對(duì)象。例如：

[
  { "姓名": "張三", "年齡": 25 },
  { "姓名": "李四", "年齡": 30 }
]

若 header: 0 ，則默認(rèn)以 A、B、C 作為字段名，輸出如下：

[
  { "A": "姓名", "B": "年齡" },
  { "A": "張三", "B": 25 }
]

6.2 數(shù)據(jù)轉(zhuǎn)換的進(jìn)階技巧

6.2.1 忽略空行與無(wú)效數(shù)據(jù)

可以通過(guò) sheet_to_json 的 blankrows 參數(shù)來(lái)控制是否忽略空行，默認(rèn)為 true ，表示不忽略。若要忽略空行，可以結(jié)合 JavaScript 的 filter 方法處理：

const filteredData = jsonData.filter(row => Object.values(row).some(cell => cell !== null && cell !== ""));

6.2.2 自定義列名與字段命名

如果你希望將 Excel 中的列頭映射為自定義字段名，可以在讀取后手動(dòng)重命名字段：

const renamedData = jsonData.map(row => ({
  name: row['姓名'],
  age: row['年齡']
}));

或者使用 sheet_to_json 前對(duì) Sheet 對(duì)象進(jìn)行預(yù)處理，替換原始列名。

6.3 數(shù)據(jù)處理與JavaScript數(shù)組操作結(jié)合

6.3.1 使用filter、map等方法處理轉(zhuǎn)換后的數(shù)據(jù)

一旦數(shù)據(jù)被轉(zhuǎn)換為 JSON 數(shù)組，就可以使用常見(jiàn)的數(shù)組方法進(jìn)行處理：

// 篩選年齡大于25的數(shù)據(jù)
const adults = renamedData.filter(person => person.age > 25);

// 提取所有名字
const names = renamedData.map(person => person.name);

6.3.2 數(shù)據(jù)驗(yàn)證與錯(cuò)誤處理機(jī)制

在數(shù)據(jù)處理過(guò)程中，應(yīng)加入數(shù)據(jù)校驗(yàn)邏輯，防止非法數(shù)據(jù)導(dǎo)致運(yùn)行錯(cuò)誤：

const validData = renamedData.filter(person => {
  if (typeof person.age !== 'number') {
    console.warn('年齡字段錯(cuò)誤:', person);
    return false;
  }
  return true;
});

也可以結(jié)合 try-catch 捕獲轉(zhuǎn)換過(guò)程中的異常：

try {
  const jsonData = XLSX.utils.sheet_to_json(worksheet);
} catch (e) {
  console.error('數(shù)據(jù)轉(zhuǎn)換失敗:', e);
}

6.4 示例代碼實(shí)現(xiàn)完整讀取流程

6.4.1 完整代碼結(jié)構(gòu)與邏輯說(shuō)明

以下是一個(gè)完整的前端讀取 Excel 文件并轉(zhuǎn)換為 JSON 數(shù)組的示例代碼：

<input type="file" id="excelFile" accept=".xlsx, .xls" />
<table id="dataTable"></table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<script>
  document.getElementById('excelFile').addEventListener('change', function(e) {
    const file = e.target.files[0];
    const reader = new FileReader();

    reader.onload = function(event) {
      const data = new Uint8Array(event.target.result);
      const workbook = XLSX.read(data, { type: 'array' });
      const sheetName = workbook.SheetNames[0];
      const worksheet = workbook.Sheets[sheetName];

      // 轉(zhuǎn)換為JSON數(shù)組
      const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });

      // 手動(dòng)映射字段
      const renamedData = jsonData.slice(1).map(row => ({
        name: row[0],
        age: row[1]
      }));

      // 渲染到HTML表格
      const table = document.getElementById('dataTable');
      table.innerHTML = '';
      renamedData.forEach(person => {
        const tr = document.createElement('tr');
        tr.innerHTML = `<td>${person.name}</td><td>${person.age}</td>`;
        table.appendChild(tr);
      });
    };

    reader.readAsArrayBuffer(file);
  });
</script>

6.4.2 實(shí)際運(yùn)行效果與調(diào)試技巧

上述代碼實(shí)現(xiàn)了一個(gè)完整的流程：
1. 用戶(hù)選擇 Excel 文件；
2. 通過(guò) FileReader 讀取文件；
3. 使用 XLSX.read 解析為 Workbook；
4. 使用 sheet_to_json 轉(zhuǎn)換為 JSON；
5. 映射字段并渲染到 HTML 表格。

調(diào)試時(shí)建議在控制臺(tái)打印中間變量：

console.log('原始數(shù)據(jù):', jsonData);
console.log('映射后數(shù)據(jù):', renamedData);

通過(guò)瀏覽器開(kāi)發(fā)者工具（F12）查看控制臺(tái)輸出和 DOM 元素，可以快速定位問(wèn)題所在。

以上就是JavaScript前端讀取Excel文件的實(shí)戰(zhàn)指南的詳細(xì)內(nèi)容，更多關(guān)于JavaScript讀取Excel文件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論