JavaScript前端读取Excel文件实战指南-前端-CSS教程网

JavaScript前端读取Excel文件实战指南

本文还有配套的精品资源，点击获取

简介：在前端开发中，JavaScript通过“js-xlsx”库实现Excel文件的解析与数据提取，支持从用户上传的.xlsx文件中读取内容并转换为JavaScript可操作的数据结构。本文介绍该库的基本使用流程，包括安装、文件读取、工作表解析、数据转换与处理，并提供完整示例代码，适用于需要在前端实现Excel数据处理的应用场景。

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

随着Web应用功能的不断拓展，前端直接处理Excel文件的需求日益增长。在数据导入、报表预览、用户信息上传等业务场景中，Excel因其结构清晰、操作便捷，成为企业数据交互的重要载体。传统做法是将文件上传至后端处理，但这种方式增加了服务器负担，响应速度受限。随着JavaScript技术的成熟，特别是在File API和相关库（如js-xlsx）的支持下，浏览器端读取和解析Excel文件已成为现实。这不仅提升了应用响应速度，也优化了用户体验，为前端工程师带来了全新的技术挑战与实践机会。

2. js-xlsx库简介与安装方法

2.1 js-xlsx库概述

2.1.1 什么是js-xlsx

js-xlsx 是一个由SheetJS开发的开源JavaScript库，用于在前端或Node.js环境中读写Excel文件（支持 .xls 和 .xlsx 格式）。该库功能强大，支持多种Excel格式的解析与生成，能够将Excel文件转换为JSON、CSV、HTML等结构化数据格式，广泛应用于Web应用中的数据导入导出场景。

其核心优势在于：

纯JavaScript实现 ，无需依赖任何其他库（如jQuery）。
跨平台兼容 ，支持浏览器端与Node.js环境。
轻量级 ，压缩后体积小，适合嵌入到生产环境。
丰富的API接口 ，可灵活处理Excel中的Sheet、Cell、样式、公式等内容。

2.1.2 js-xlsx的核心功能

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

功能模块	功能描述
`XLSX.readFile`	读取本地Excel文件（支持同步与异步）
`XLSX.utils.aoa_to_sheet`	将二维数组转换为工作表对象
`XLSX.utils.sheet_to_json`	将Sheet对象转换为JSON数组
`XLSX.write`	生成Excel文件并支持下载或写入Node.js流
`XLSX.SSF`	提供单元格格式化与解析功能
`XLSX.utils.encode_cell`	将行列索引转换为Excel单元格地址（如 A1、B2 等）

此外， js-xlsx 还支持多种格式的导出，包括CSV、HTML表格、ODS等。其灵活性使其成为前端Excel操作的首选库之一。

2.2 js-xlsx的安装与引入方式

2.2.1 使用npm安装js-xlsx

对于使用模块化构建工具（如Webpack、Vite、Rollup等）的现代前端项目，推荐使用npm方式安装：

npm install xlsx

安装完成后，在JavaScript文件中通过 import 引入：

import * as XLSX from 'xlsx';

注意：部分构建工具可能需要额外配置，例如在Vue或React项目中确保 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);
}

代码逻辑说明 ：
1. 使用 FileReader 读取用户上传的Excel文件。
2. 通过 XLSX.read 将文件内容转换为 workbook 对象。
3. 获取第一个工作表并通过 sheet_to_json 转换为JSON格式。

2.2.2 在HTML中直接引入CDN链接

对于不使用模块化构建的简单项目或静态页面，可以通过CDN引入 js-xlsx ：

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

此方式无需任何构建步骤，直接在浏览器中使用全局变量 XLSX 。

示例代码：HTML中使用CDN引入并读取Excel

<input type="file" id="excel-file" a***ept=".xlsx, .xls" />
<script src="https://cdnjs.cloudflare.***/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>

代码逻辑说明 ：
1. 监听文件选择框的 change 事件，获取文件对象。
2. 使用 FileReader 读取文件内容。
3. 使用 XLSX.read 解析文件为工作簿对象。
4. 提取第一个工作表，并转换为JSON数组。

2.2.3 模块化开发中的导入方式

在使用模块化框架（如Vue、React、Angular）时，建议使用 import 方式引入 xlsx ，以便更好地管理依赖与打包体积。

Vue项目示例：

<template>
  <input type="file" @change="handleFileUpload" a***ept=".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>

代码逻辑说明 ：
1. 在Vue组件中绑定文件上传事件。
2. 使用 XLSX 库读取Excel文件并解析为JSON。
3. 打印解析结果到控制台。

2.3 js-xlsx的兼容性与注意事项

2.3.1 浏览器兼容性分析

js-xlsx 支持现代浏览器和IE11（部分功能需polyfill）。以下为兼容性表格：

浏览器	兼容性	备注
Chrome	✅ 完全支持	最新版本兼容性最佳
Firefox	✅ 完全支持	需启用部分实验性功能（如 `FileReaderSync` ）
Safari	✅ 完全支持	iOS Safari 也支持
Edge	✅ 完全支持	版本需 ≥ Edge 12
IE11	⚠️ 部分支持	需引入polyfill处理 `ArrayBuffer` 、 `TypedArray`
Mobile Safari	✅ 完全支持	包括iOS 9及以上
Android Browser	✅ 完全支持	Android 4.4及以上

兼容性建议 ：
- 对于IE11环境，建议引入 xlsx.core.min.js 并使用 FileReader polyfill。
- 使用 XLSX.set_cptable 以支持中文字符的正确解析。

2.3.2 常见问题及解决方案

问题1：读取文件时提示 `Not a valid zip` 错误

原因：上传的文件格式不被支持或文件损坏。

解决方案 ：
- 检查文件是否为 .xls 或 .xlsx 格式。
- 确保文件未损坏，尝试使用Excel重新保存文件。
- 使用 try-catch 捕获异常：

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

问题2：读取中文内容乱码

原因： js-xlsx 默认不处理字符编码，某些Excel文件可能包含非UTF-8编码。

解决方案 ：
使用 cptable 插件处理编码转换：

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

问题3：处理大文件时卡顿或崩溃

原因： js-xlsx 是同步解析库，处理大文件时可能阻塞主线程。

解决方案 ：
- 使用 Web Worker 异步处理大文件解析。
- 分页读取或限制读取的Sheet数量。
- 前端提示用户上传文件大小限制。

流程图：js-xlsx文件读取流程

graph TD
    A[用户选择Excel文件] --> B[通过FileReader读取文件]
    B --> C{判断文件类型}
    C -->| .xls | D[XLSX.read解析文件]
    C -->| .xlsx | D
    D --> E[获取Workbook对象]
    E --> F[获取SheetNames数组]
    F --> G[访问指定Sheet对象]
    G --> H[XLSX.utils.sheet_to_json转换数据]
    H --> I[输出JSON数组]

该流程图清晰地展示了 js-xlsx 从文件选择到最终数据解析的完整流程，有助于开发者理解其工作原理。

本章内容完整地介绍了 js-xlsx 的基本概念、安装方式及兼容性问题，为后续章节深入解析Excel数据结构和处理逻辑打下了坚实基础。

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

在前端开发中，处理Excel文件已成为一种常见需求，尤其在数据导入、报表展示等场景中。 XLSX.readFile 是 js-xlsx （也称 SheetJS ）库提供的一个核心方法，用于从本地文件系统读取 Excel 文件。本章将详细介绍如何结合 HTML5 的 input 元素获取用户上传的文件对象，并使用 XLSX.readFile 方法进行读取，同时对读取后的数据结构进行初步解析。

3.1 通过input元素获取文件对象

在 Web 应用中，用户通常通过 <input type="file"> 元素上传文件。HTML5 提供了 File API ，使前端可以访问用户选择的本地文件内容。

3.1.1 HTML5中File API的基础知识

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

File ：表示一个文件对象。
FileList ：表示一组 File 对象，通常由 <input type="file"> 元素返回。
FileReader ：用于异步读取文件内容。

使用这些 API，前端可以访问用户上传的文件内容，并将其传递给 js-xlsx 进行解析。

3.1.2 事件监听与文件读取

我们可以为 <input type="file"> 元素绑定 change 事件监听器，当用户选择文件后触发文件读取操作。

<input type="file" id="excelFile" a***ept=".xlsx,.xls" />

document.getElementById('excelFile').addEventListener('change', function(e) {
    const file = e.target.files[0];  // 获取用户选择的第一个文件
    if (file) {
        const reader = new FileReader();  // 创建FileReader对象
        reader.onload = function(event) {
            const data = new Uint8Array(event.target.result);  // 转换为二进制数组
            const workbook = XLSX.read(data, { type: 'array' });  // 使用js-xlsx解析
            console.log(workbook);  // 输出解析后的workbook对象
        };
        reader.readAsArrayBuffer(file);  // 以ArrayBuffer形式读取文件
    }
});

⚠️ 注意： FileReader.readAsArrayBuffer() 是读取 Excel 文件的推荐方式，因为 Excel 文件是二进制格式。

代码逻辑分析

第 1 行 ：为 <input> 元素绑定 change 事件监听器。
第 2 行 ：通过 e.target.files[0] 获取用户选择的第一个文件。
第 4 行 ：创建 FileReader 实例，用于异步读取文件。
第 5 行 ：定义 onload 事件回调，当文件读取完成后执行。
第 6 行 ：将 result 转换为 Uint8Array ，以便传给 XLSX.read() 。
第 7 行 ：调用 XLSX.read() 方法解析 Excel 文件。
第 10 行 ：以 ArrayBuffer 格式读取文件内容。

3.2 XLSX.readFile方法详解

XLSX.readFile 是 js-xlsx 提供的另一个便捷方法，可以直接传入文件路径或文件对象进行解析，尤其适用于 Node.js 环境或 Electron 应用。

3.2.1 参数说明与使用方式

参数名	类型	必填	描述
filename	`string`	是	文件路径或文件名
opts	`object`	否	配置选项，如 `type` , `sheet` , `cellDates` 等

常见配置选项：

选项名	类型	默认值	描述
type	`string`	`"base64"`	读取类型，可选 `base64` , `binary` , `buffer` , `array` , `file`
sheet	`number` 或 `string`	无	指定读取的工作表索引或名称
cellDates	`boolean`	`false`	是否将日期单元格转换为 JS Date 对象

示例代码

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

代码逻辑分析

第 1 行 ：调用 XLSX.readFile() 方法读取本地路径为 data.xlsx 的文件。
第 2 行 ：指定读取类型为 file ，即直接读取文件路径。
第 3 行 ：将日期单元格转换为 Date 对象，便于后续处理。

⚠️ 注意： XLSX.readFile() 在浏览器中使用时需确保文件路径有效，通常用于 Electron 或本地文件系统环境。

3.2.2 读取不同格式的Excel文件（.xls与.xlsx）

js-xlsx 支持读取 .xls （Excel 2003）和 .xlsx （Excel 2007 及以上）两种格式，无需额外配置。

支持格式对比表：

文件格式	扩展名	说明	是否支持
Excel 2003	`.xls`	二进制格式，BIFF8	✅ 支持
Excel 2007+	`.xlsx`	基于 ZIP 的 XML 格式	✅ 支持
CSV	`.csv`	纯文本格式	✅ 支持（需手动处理）
Excel 2016+（新功能）	`.xlsm` , `.xlsx`	含宏或高级功能	✅ 基础功能支持

示例流程图（mermaid）

graph TD
    A[用户选择Excel文件] --> B{判断文件扩展名}
    B -->| .xls | C[使用XLSX.readFile读取]
    B -->| .xlsx | D[使用XLSX.readFile读取]
    C --> E[解析为Workbook对象]
    D --> E
    E --> F[输出解析结果]

3.3 文件读取后的数据结构初步解析

当 Excel 文件被成功读取后， XLSX.readFile 返回一个 workbook 对象，该对象包含了整个 Excel 文件的数据结构。

3.3.1 Workbook对象的结构

workbook 对象是一个 JavaScript 对象，其结构如下：

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

属性名	类型	描述
SheetNames	`Array<string>`	所有工作表名称
Sheets	`Object`	以工作表名称为键，对应工作表数据对象
Props	`Object`	文档属性（如创建者、修改时间等）
Custprops	`Object`	自定义属性

3.3.2 常用属性与方法介绍

SheetNames 数组

SheetNames 是一个字符串数组，保存了 Excel 文件中所有工作表的名称。例如：

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

Sheets 对象

每个工作表数据以键值对形式存储在 Sheets 对象中，例如：

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

每个单元格数据对象包含以下属性：

属性	类型	描述
v	`any`	单元格值
t	`string`	值的类型，如 `'n'` （数值）、 `'s'` （字符串）、 `'d'` （日期）等
z	`string`	数值格式（如日期格式）
w	`string`	格式化后的显示值

示例代码

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 行 ：获取第一个工作表名称。
第 2 行 ：根据名称获取工作表对象。
第 4 行 ：遍历 A1 到 A10 单元格。
第 5 行 ：判断单元格是否存在。
第 6 行 ：输出单元格的值。

通过本章内容，我们已经掌握了如何使用 XLSX.readFile 方法读取 Excel 文件，并对其返回的 workbook 对象进行初步解析。下一章我们将深入探讨 workbook 对象的内部结构，包括 SheetNames 、 Sheets 和单元格数据的具体表示方式。

4. 解析Workbook对象结构

在使用 js-xlsx 库读取 Excel 文件后，返回的核心对象是一个 Workbook 对象。该对象包含了文件中所有工作表（Sheet）的名称列表（SheetNames）以及各个工作表的数据结构（Sheets）。为了有效提取和处理 Excel 文件中的数据，开发者必须深入理解 Workbook 对象的结构及其子对象的组织方式。本章将逐步解析 Workbook 的核心属性与数据结构，并通过代码示例说明如何遍历和访问其中的数据。

4.1 Workbook对象的核心属性

4.1.1 SheetNames数组的作用

SheetNames 是 Workbook 对象中的一个数组属性，用于存储 Excel 文件中所有工作表的名称。Excel 文件通常包含多个工作表（Sheet），例如“Sheet1”、“Sheet2”等。在前端处理文件时，通常需要根据名称动态访问特定的工作表。

const workbook = XLSX.readFile('example.xlsx');
console.log(workbook.SheetNames);
// 输出类似 ["Sheet1", "Sheet2"]

代码逻辑分析：

XLSX.readFile('example.xlsx') ：读取本地 Excel 文件，返回一个 Workbook 对象。
workbook.SheetNames ：访问 Workbook 中的 SheetNames 属性，它是一个数组，包含所有工作表的名称。
console.log(...) ：将名称数组输出到控制台，便于开发者查看和调试。

4.1.2 Sheets对象的组成与结构

Sheets 是 Workbook 对象中另一个核心属性，它是一个对象（Object），键（Key）为工作表名称，值（Value）为对应的工作表对象（Sheet Object）。每个 Sheet 对象中存储了该工作表中所有单元格的数据及其格式信息。

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

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

代码逻辑分析：

workbook.Sheets ：获取 Workbook 中的所有工作表对象。
sheetNames.forEach(...) ：遍历所有工作表名称。
sheets[sheetName] ：通过名称访问对应的 Sheet 对象。
console.log(...) ：输出每个 Sheet 对象的内容，帮助开发者理解其内部结构。

4.2 Sheet对象的数据结构解析

4.2.1 单元格数据的表示方式（A1、B2等）

在 js-xlsx 中，Sheet 对象的每个单元格由其地址（如 A1、B2 等）作为键进行存储。每个单元格数据以对象形式存储，包含 .v （值）、 .t （类型）、 .w （显示值）等字段。

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

输出示例：

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

参数说明：

v ：单元格的实际值（value）。
t ：单元格的数据类型（s 表示字符串，n 表示数字，d 表示日期等）。
w ：单元格的显示格式值（formatted value）。

4.2.2 各类型数据的存储格式（数值、字符串、日期等）

不同类型的单元格数据在 Sheet 对象中以不同的方式存储，开发者需要根据类型字段 .t 来判断如何处理数据。

类型标识符	数据类型	示例值
`"s"`	字符串	`"姓名"`
`"n"`	数值	`89.5`
`"d"`	日期	`"2023-01-01"`
`"b"`	布尔值	`true` / `false`
`"e"`	错误值	`#DIV/0!`

代码示例：根据类型解析单元格内容

function getCellValue(cell) {
    if (!cell) return '';
    switch(cell.t) {
        case 's': // 字符串
            return cell.v;
        case 'n': // 数值
            return cell.v;
        case 'd': // 日期
            return cell.w;
        case 'b': // 布尔值
            return cell.v ? '是' : '否';
        case 'e': // 错误
            return '错误值: ' + cell.w;
        default:
            return '';
    }
}

逻辑分析：

函数 getCellValue(cell) 接收一个单元格对象。
使用 switch 判断 .t 类型，返回对应的值。
若单元格为空或未定义，返回空字符串。
对于日期类型，使用 .w 获取格式化字符串而非原始时间戳。

4.3 遍历工作簿内容

4.3.1 遍历SheetNames获取工作表名称

遍历 SheetNames 是访问每个工作表的前提。通过名称访问对应的 Sheet 对象，可以进一步提取数据。

const workbook = XLSX.readFile('data.xlsx');
workbook.SheetNames.forEach((sheetName, index) => {
    console.log(`第 ${index + 1} 个工作表名称：${sheetName}`);
});

流程图说明：

graph TD
    A[开始] --> B[读取Excel文件]
    B --> C[获取SheetNames数组]
    C --> D[遍历数组]
    D --> E[输出每个Sheet名称]
    E --> F[结束]

逻辑分析：

读取 Excel 文件后，遍历 SheetNames 数组。
使用 forEach 方法，传入当前名称与索引。
输出每个工作表名称，便于后续访问。

4.3.2 动态访问不同工作表的数据

在实际应用中，常常需要根据用户选择或业务逻辑动态访问不同工作表的数据。以下示例演示如何根据名称访问特定工作表并提取数据：

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

表格展示：函数 getSheetData 返回结构示例

姓名	年龄	生日
张三	28	1995-03-15
李四	32	1990-07-22

逻辑分析：

XLSX.utils.decode_range(sheet['!ref']) ：解析工作表的范围，如 "A1:C3" 。
使用双层循环遍历行和列。
通过 XLSX.utils.encode_cell 构建单元格地址。
调用 getCellValue 提取数据。
将每行数据组合为二维数组返回。

通过本章内容，我们深入解析了 Workbook 对象的核心属性与结构，掌握了 SheetNames 和 Sheets 的作用，并学会了如何遍历和提取单元格数据。下一章我们将进一步探讨如何获取工作表名称列表，并动态访问具体的工作表内容，为前端 Excel 数据处理打下坚实基础。

5. 获取SheetNames与访问具体工作表

在前端使用 js-xlsx 读取 Excel 文件后，开发者通常需要对工作簿中的多个工作表进行访问与处理。Excel 文件可以包含多个工作表（Sheet），每个工作表对应不同的数据集或业务逻辑。本章将详细介绍如何获取 Excel 文件中所有工作表的名称，以及如何访问特定名称的工作表，并实现数据的动态展示与切换。

5.1 获取Excel文件中的所有工作表名称

5.1.1 SheetNames数组的读取方法

在使用 js-xlsx 解析 Excel 文件后，会得到一个 workbook 对象，其中包含了一个名为 SheetNames 的数组，该数组中存储了该工作簿中所有工作表的名称。

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

代码解析：
- XLSX.read(data, { type: 'array' }) ：将二进制数据 data 转换为工作簿对象。
- workbook.SheetNames ：获取所有工作表名称组成的数组。
- console.log(sheetNames) ：输出工作表名称数组，用于调试或后续操作。

该数组可以用于生成工作表名称下拉框，或作为数据展示的入口。开发者可以通过遍历该数组，动态获取每个工作表的数据。

示例：遍历SheetNames并展示名称

sheetNames.forEach((name, index) => {
    console.log(`工作表${index + 1}名称为：${name}`);
});

代码逻辑说明：
- 使用 forEach 遍历 SheetNames 数组。
- 输出每个工作表名称及其索引位置，便于后续选择。

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

对于包含多个工作表的 Excel 文件，处理策略主要包括：

处理方式	说明
逐个读取	按照 `SheetNames` 顺序，依次读取每个工作表的数据
按需加载	用户选择工作表后，再读取对应数据，减少前端内存占用
合并数据	将多个工作表的数据合并为一个数据集进行展示

优化建议：
- 对于大型 Excel 文件，推荐采用按需加载策略，避免一次性读取所有数据导致性能下降。
- 可以结合前端组件（如 Tab 面板）实现多工作表切换。

5.2 访问指定名称的工作表

5.2.1 通过XLSX.utils.aoa_to_sheet解析Sheet对象

在获取 workbook 后，可以通过 workbook.Sheets[SheetName] 获取对应的工作表对象。该对象中包含了工作表的原始数据结构，包括单元格地址与值的映射。

const sheetName = sheetNames[0]; // 获取第一个工作表名称
const worksheet = workbook.Sheets[sheetName]; // 获取工作表对象
console.log(worksheet);

参数说明：
- sheetNames[0] ：表示第一个工作表的名称，如 "Sheet1" 。
- worksheet ：返回的工作表对象，结构为 { '!ref': 'A1:C3', A1: { v: '标题' }, B1: { v: 123 }, ... } 。

若需要将工作表数据转换为二维数组，可以使用 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) ：将工作表转换为二维数组。
- aoa ：输出为二维数组，如 [['标题', '数值'], ['A', 10], ['B', 20]] 。

5.2.2 获取Sheet的原始数据格式

工作表对象（Sheet）的原始数据结构如下：

{
  "!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": "男" }
}

字段说明：
- !ref ：表示数据范围，这里是 A1:C3 。
- t ：表示单元格数据类型，如：
- 's' ：字符串（String）
- 'n' ：数值（Number）
- 'd' ：日期（Date）
- v ：表示单元格的值。

开发者可以通过遍历该结构来手动解析数据，或使用 XLSX.utils.sheet_to_json 方法进行自动转换。

5.3 工作表数据的动态展示

5.3.1 将工作表数据渲染至HTML表格

将 Excel 数据渲染为 HTML 表格是常见的需求。以下是一个完整的实现示例：

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

function renderTable(sheetData) {
    const table = document.getElementById('excelTable');
    table.innerHTML = ''; // 清空旧数据

    // 遍历二维数组
    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);
    });
}

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

代码逻辑分析：
- renderTable(sheetData) ：接收二维数组，将其渲染为 HTML 表格。
- sheetData.forEach(...) ：遍历每一行。
- 创建 tr 和 td 元素，填充单元格内容。
- 最终将表格插入到页面中。

5.3.2 支持多Sheet切换的前端实现

为了实现多工作表切换功能，可以添加下拉框让用户选择工作表名称，然后动态加载并渲染对应数据。

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

// 监听下拉框变化
sheetSelector.addEventListener('change', () => {
    const selectedSheet = sheetSelector.value;
    const worksheet = workbook.Sheets[selectedSheet];
    const aoa = XLSX.utils.sheet_to_aoa(worksheet);
    renderTable(aoa);
});

代码说明：
- 使用 select 元素创建下拉框。
- 遍历 sheetNames ，为每个工作表名称创建一个 option 。
- 添加事件监听器，当下拉框选项改变时，重新加载并渲染对应工作表数据。

流程图：多Sheet切换实现逻辑

graph TD
    A[用户选择工作表] --> B[获取工作表名称]
    B --> C[从workbook中获取对应Sheet]
    C --> D[转换为二维数组]
    D --> E[渲染为HTML表格]

流程图说明：
- 用户通过下拉框选择工作表名称。
- 获取该名称对应的工作表对象。
- 将工作表数据转换为二维数组。
- 渲染为 HTML 表格展示给用户。

本章深入讲解了如何获取 Excel 文件中的所有工作表名称、访问指定工作表以及实现数据的动态展示与切换。通过 SheetNames 数组可以获取所有工作表名称，结合 workbook.Sheets[name] 可以访问具体工作表的数据。此外，使用 XLSX.utils.sheet_to_aoa 可将数据转换为二维数组，并结合 HTML 动态渲染为表格。最后，通过下拉框实现了多工作表切换功能，为后续的数据展示与交互奠定了基础。

6. 使用sheet_to_json转换数据为数组

在前端处理 Excel 文件的过程中，一个非常关键的步骤是将 Excel 中的工作表数据转化为 JavaScript 可操作的格式。 sheet_to_json 是 js-xlsx 库提供的一个核心方法，用于将 Sheet 对象转换为 JSON 数组形式，便于后续的数据处理、展示或上传。

6.1 sheet_to_json方法的基本用法

sheet_to_json 是 XLSX.utils 模块下的一个工具函数，能够将一个 Sheet 对象（即工作表）转换为 JavaScript 数组对象。

6.1.1 参数配置与字段映射

const worksheet = workbook.Sheets[sheetName];
const jsonData = XLSX.utils.sheet_to_json(worksheet, {
  header: 1, // 设置第一行为表头
  defval: null, // 空值用 null 填充
  raw: true // 禁止自动转换数据类型
});

参数名	类型	默认值	描述
`header`	number / array	1	设置哪一行作为字段名（如 header: 1 表示第一行为字段名）
`defval`	any	undefined	当单元格为空时填充的默认值
`raw`	boolean	false	是否保留原始数据类型（不转换数字、日期等）
`range`	number	0	指定读取的行范围（如只读取前5行）

6.1.2 数据转换的格式规范

当 header: 1 时， sheet_to_json 会将第一行作为字段名，后续每一行对应一个对象。例如：

[
  { "姓名": "张三", "年龄": 25 },
  { "姓名": "李四", "年龄": 30 }
]

若 header: 0 ，则默认以 A、B、C 作为字段名，输出如下：

[
  { "A": "姓名", "B": "年龄" },
  { "A": "张三", "B": 25 }
]

6.2 数据转换的进阶技巧

6.2.1 忽略空行与无效数据

可以通过 sheet_to_json 的 blankrows 参数来控制是否忽略空行，默认为 true ，表示不忽略。若要忽略空行，可以结合 JavaScript 的 filter 方法处理：

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

6.2.2 自定义列名与字段命名

如果你希望将 Excel 中的列头映射为自定义字段名，可以在读取后手动重命名字段：

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

或者使用 sheet_to_json 前对 Sheet 对象进行预处理，替换原始列名。

6.3 数据处理与JavaScript数组操作结合

6.3.1 使用filter、map等方法处理转换后的数据

一旦数据被转换为 JSON 数组，就可以使用常见的数组方法进行处理：

// 筛选年龄大于25的数据
const adults = renamedData.filter(person => person.age > 25);

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

6.3.2 数据验证与错误处理机制

在数据处理过程中，应加入数据校验逻辑，防止非法数据导致运行错误：

const validData = renamedData.filter(person => {
  if (typeof person.age !== 'number') {
    console.warn('年龄字段错误:', person);
    return false;
  }
  return true;
});

也可以结合 try-catch 捕获转换过程中的异常：

try {
  const jsonData = XLSX.utils.sheet_to_json(worksheet);
} catch (e) {
  console.error('数据转换失败:', e);
}

6.4 示例代码实现完整读取流程

6.4.1 完整代码结构与逻辑说明

以下是一个完整的前端读取 Excel 文件并转换为 JSON 数组的示例代码：

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

<script src="https://cdnjs.cloudflare.***/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];

      // 转换为JSON数组
      const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });

      // 手动映射字段
      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 实际运行效果与调试技巧

上述代码实现了一个完整的流程：
1. 用户选择 Excel 文件；
2. 通过 FileReader 读取文件；
3. 使用 XLSX.read 解析为 Workbook；
4. 使用 sheet_to_json 转换为 JSON；
5. 映射字段并渲染到 HTML 表格。

调试时建议在控制台打印中间变量：

console.log('原始数据:', jsonData);
console.log('映射后数据:', renamedData);

通过浏览器开发者工具（F12）查看控制台输出和 DOM 元素，可以快速定位问题所在。

本文还有配套的精品资源，点击获取

转载请说明出处内容投诉
CSS教程网 » JavaScript前端读取Excel文件实战指南

小盆友

分享到：

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

2. js-xlsx库简介与安装方法

2.1 js-xlsx库概述

2.1.1 什么是js-xlsx

2.1.2 js-xlsx的核心功能

2.2 js-xlsx的安装与引入方式

2.2.1 使用npm安装js-xlsx

示例代码：读取并解析Excel文件

2.2.2 在HTML中直接引入CDN链接

示例代码：HTML中使用CDN引入并读取Excel

2.2.3 模块化开发中的导入方式

Vue项目示例：

2.3 js-xlsx的兼容性与注意事项

2.3.1 浏览器兼容性分析

2.3.2 常见问题及解决方案

问题1：读取文件时提示 Not a valid zip 错误

问题2：读取中文内容乱码

问题3：处理大文件时卡顿或崩溃

流程图：js-xlsx文件读取流程

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

3.1 通过input元素获取文件对象

3.1.1 HTML5中File API的基础知识

3.1.2 事件监听与文件读取

代码逻辑分析

3.2 XLSX.readFile方法详解

3.2.1 参数说明与使用方式

示例代码

代码逻辑分析

3.2.2 读取不同格式的Excel文件（.xls与.xlsx）

支持格式对比表：

示例流程图（mermaid）

3.3 文件读取后的数据结构初步解析

3.3.1 Workbook对象的结构

3.3.2 常用属性与方法介绍

SheetNames 数组

Sheets 对象

示例代码

代码逻辑分析

4. 解析Workbook对象结构

4.1 Workbook对象的核心属性

4.1.1 SheetNames数组的作用

4.1.2 Sheets对象的组成与结构

4.2 Sheet对象的数据结构解析

4.2.1 单元格数据的表示方式（A1、B2等）

4.2.2 各类型数据的存储格式（数值、字符串、日期等）

4.3 遍历工作簿内容

4.3.1 遍历SheetNames获取工作表名称

4.3.2 动态访问不同工作表的数据

5. 获取SheetNames与访问具体工作表

5.1 获取Excel文件中的所有工作表名称

5.1.1 SheetNames数组的读取方法

示例：遍历SheetNames并展示名称

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

5.2 访问指定名称的工作表

5.2.1 通过XLSX.utils.aoa_to_sheet解析Sheet对象

5.2.2 获取Sheet的原始数据格式

5.3 工作表数据的动态展示

5.3.1 将工作表数据渲染至HTML表格

5.3.2 支持多Sheet切换的前端实现

流程图：多Sheet切换实现逻辑

6. 使用sheet_to_json转换数据为数组

6.1 sheet_to_json方法的基本用法

6.1.1 参数配置与字段映射

6.1.2 数据转换的格式规范

6.2 数据转换的进阶技巧

6.2.1 忽略空行与无效数据

6.2.2 自定义列名与字段命名

6.3 数据处理与JavaScript数组操作结合

6.3.1 使用filter、map等方法处理转换后的数据

6.3.2 数据验证与错误处理机制

6.4 示例代码实现完整读取流程

6.4.1 完整代码结构与逻辑说明

6.4.2 实际运行效果与调试技巧

小盆友

发表评论

一个令你着迷的主题！

问题1：读取文件时提示 `Not a valid zip` 错误