介绍使用 JavaScript 库 js-xlsx 在前端解析 Excel 文件的方法。涵盖安装配置、通过 FileReader 读取二进制数据、Workbook 与 Sheet 对象结构解析、数据转换为 JSON 数组及常见错误处理。提供 Vue/React 示例及多工作表切换方案，适用于数据导入与报表场景。
随着 Web 应用功能的不断拓展，前端直接处理 Excel 文件的需求日益增长。在数据导入、报表预览、用户信息上传等业务场景中，Excel 因其结构清晰、操作便捷，成为企业数据交互的重要载体。传统做法是将文件上传至后端处理，但这种方式增加了服务器负担，响应速度受限。随着 JavaScript 技术的成熟，特别是在 File API 和相关库（如 js-xlsx）的支持下，浏览器端读取和解析 Excel 文件已成为现实。这不仅提升了应用响应速度，也优化了用户体验，为前端工程师带来了全新的技术挑战与实践机会。
js-xlsx 是一个由 SheetJS 开发的开源 JavaScript 库，用于在前端或 Node.js 环境中读写 Excel 文件（支持 .xls 和 .xlsx 格式）。该库功能强大，支持多种 Excel 格式的解析与生成，能够将 Excel 文件转换为 JSON、CSV、HTML 等结构化数据格式，广泛应用于 Web 应用中的数据导入导出场景。
其核心优势在于：
以下是 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 操作的首选库之一。
对于使用模块化构建工具（如 Webpack、Vite、Rollup 等）的现代前端项目，推荐使用 npm 方式安装：
npm install xlsx
安装完成后，在 JavaScript 文件中通过 import 引入：
import * as XLSX from 'xlsx';
注意：部分构建工具可能需要额外配置，例如在 Vue 或 React 项目中确保
xlsx被正确打包。
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);
}
代码逻辑说明：
- 使用
FileReader读取用户上传的 Excel 文件。- 通过
XLSX.read将文件内容转换为workbook对象。- 获取第一个工作表并通过
sheet_to_json转换为 JSON 格式。
对于不使用模块化构建的简单项目或静态页面，可以通过 CDN 引入 js-xlsx：
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
此方式无需任何构建步骤，直接在浏览器中使用全局变量 XLSX。
<input type="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>
代码逻辑说明：
- 监听文件选择框的
change事件，获取文件对象。- 使用
FileReader读取文件内容。- 使用
XLSX.read解析文件为工作簿对象。- 提取第一个工作表，并转换为 JSON 数组。
在使用模块化框架（如 Vue、React、Angular）时，建议使用 import 方式引入 xlsx，以便更好地管理依赖与打包体积。
<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>
代码逻辑说明：
- 在 Vue 组件中绑定文件上传事件。
- 使用
XLSX库读取 Excel 文件并解析为 JSON。- 打印解析结果到控制台。
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并使用FileReaderpolyfill。- 使用
XLSX.set_cptable以支持中文字符的正确解析。
Not a valid zip 错误原因：上传的文件格式不被支持或文件损坏。
解决方案：
.xls 或 .xlsx 格式。try-catch 捕获异常：try {
const workbook = XLSX.read(data, { type: 'array' });
} catch (error) {
console.error("Excel 文件解析失败：", error);
}
原因：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);
}
原因：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 数据结构和处理逻辑打下了坚实基础。
在前端开发中，处理 Excel 文件已成为一种常见需求，尤其在数据导入、报表展示等场景中。XLSX.readFile 是 js-xlsx（也称 SheetJS）库提供的一个核心方法，用于从本地文件系统读取 Excel 文件。本章将详细介绍如何结合 HTML5 的 input 元素获取用户上传的文件对象，并使用 XLSX.readFile 方法进行读取，同时对读取后的数据结构进行初步解析。
在 Web 应用中，用户通常通过 <input type="file"> 元素上传文件。HTML5 提供了 File API，使前端可以访问用户选择的本地文件内容。
HTML5 的 File API 是一组用于处理本地文件的接口，主要包括：
File：表示一个文件对象。FileList：表示一组 File 对象，通常由 <input type="file"> 元素返回。FileReader：用于异步读取文件内容。使用这些 API，前端可以访问用户上传的文件内容，并将其传递给 js-xlsx 进行解析。
我们可以为 <input type="file"> 元素绑定 change 事件监听器，当用户选择文件后触发文件读取操作。
<input type="file" accept=".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 文件是二进制格式。
<input> 元素绑定 change 事件监听器。e.target.files[0] 获取用户选择的第一个文件。FileReader 实例，用于异步读取文件。onload 事件回调，当文件读取完成后执行。result 转换为 Uint8Array，以便传给 XLSX.read()。XLSX.read() 方法解析 Excel 文件。ArrayBuffer 格式读取文件内容。XLSX.readFile 是 js-xlsx 提供的另一个便捷方法，可以直接传入文件路径或文件对象进行解析，尤其适用于 Node.js 环境或 Electron 应用。
| 参数名 | 类型 | 必填 | 描述 |
|---|---|---|---|
| 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);
XLSX.readFile() 方法读取本地路径为 data.xlsx 的文件。file，即直接读取文件路径。Date 对象，便于后续处理。⚠️ 注意：
XLSX.readFile()在浏览器中使用时需确保文件路径有效，通常用于 Electron 或本地文件系统环境。
js-xlsx 支持读取 .xls（Excel 2003）和 .xlsx（Excel 2007 及以上）两种格式，无需额外配置。
| 文件格式 | 扩展名 | 说明 | 是否支持 |
|---|---|---|---|
| Excel 2003 | .xls | 二进制格式，BIFF8 | ✅ 支持 |
| Excel 2007+ | .xlsx | 基于 ZIP 的 XML 格式 | ✅ 支持 |
| CSV | .csv | 纯文本格式 | ✅ 支持（需手动处理） |
| Excel 2016+（新功能） | .xlsm, .xlsx | 含宏或高级功能 | ✅ 基础功能支持 |
graph TD
A[用户选择 Excel 文件] --> B{判断文件扩展名}
B -->|.xls | C[使用 XLSX.readFile 读取]
B -->|.xlsx | D[使用 XLSX.readFile 读取]
C --> E[解析为 Workbook 对象]
D --> E
E --> F[输出解析结果]
当 Excel 文件被成功读取后，XLSX.readFile 返回一个 workbook 对象，该对象包含了整个 Excel 文件的数据结构。
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 | 自定义属性 |
SheetNames 是一个字符串数组，保存了 Excel 文件中所有工作表的名称。例如：
console.log(workbook.SheetNames); // ['Sheet1', 'Sheet2']
每个工作表数据以键值对形式存储在 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);
}
}
通过本章内容，我们已经掌握了如何使用 XLSX.readFile 方法读取 Excel 文件，并对其返回的 workbook 对象进行初步解析。下一章我们将深入探讨 workbook 对象的内部结构，包括 SheetNames、Sheets 和单元格数据的具体表示方式。
在使用 js-xlsx 库读取 Excel 文件后，返回的核心对象是一个 Workbook 对象。该对象包含了文件中所有工作表（Sheet）的名称列表（SheetNames）以及各个工作表的数据结构（Sheets）。为了有效提取和处理 Excel 文件中的数据，开发者必须深入理解 Workbook 对象的结构及其子对象的组织方式。本章将逐步解析 Workbook 的核心属性与数据结构，并通过代码示例说明如何遍历和访问其中的数据。
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(...)：将名称数组输出到控制台，便于开发者查看和调试。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 对象的内容，帮助开发者理解其内部结构。在 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）。不同类型的单元格数据在 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 获取格式化字符串而非原始时间戳。遍历 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[结束]
逻辑分析：
SheetNames 数组。forEach 方法，传入当前名称与索引。在实际应用中，常常需要根据用户选择或业务逻辑动态访问不同工作表的数据。以下示例演示如何根据名称访问特定工作表并提取数据：
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 数据处理打下坚实基础。
在前端使用 js-xlsx 读取 Excel 文件后，开发者通常需要对工作簿中的多个工作表进行访问与处理。Excel 文件可以包含多个工作表（Sheet），每个工作表对应不同的数据集或业务逻辑。本章将详细介绍如何获取 Excel 文件中所有工作表的名称，以及如何访问特定名称的工作表，并实现数据的动态展示与切换。
在使用 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.forEach((name, index) => {
console.log(`工作表${index + 1}名称为：${name}`);
});
代码逻辑说明：
- 使用
forEach遍历SheetNames数组。- 输出每个工作表名称及其索引位置，便于后续选择。
对于包含多个工作表的 Excel 文件，处理策略主要包括：
| 处理方式 | 说明 |
|---|---|
| 逐个读取 | 按照 SheetNames 顺序，依次读取每个工作表的数据 |
| 按需加载 | 用户选择工作表后，再读取对应数据，减少前端内存占用 |
| 合并数据 | 将多个工作表的数据合并为一个数据集进行展示 |
优化建议：
- 对于大型 Excel 文件，推荐采用按需加载策略，避免一次性读取所有数据导致性能下降。
- 可以结合前端组件（如 Tab 面板）实现多工作表切换。
在获取 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]]。
工作表对象（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 方法进行自动转换。
将 Excel 数据渲染为 HTML 表格是常见的需求。以下是一个完整的实现示例：
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元素，填充单元格内容。- 最终将表格插入到页面中。
为了实现多工作表切换功能，可以添加下拉框让用户选择工作表名称，然后动态加载并渲染对应数据。
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。- 添加事件监听器，当下拉框选项改变时，重新加载并渲染对应工作表数据。
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 动态渲染为表格。最后，通过下拉框实现了多工作表切换功能，为后续的数据展示与交互奠定了基础。
在前端处理 Excel 文件的过程中，一个非常关键的步骤是将 Excel 中的工作表数据转化为 JavaScript 可操作的格式。sheet_to_json 是 js-xlsx 库提供的一个核心方法，用于将 Sheet 对象转换为 JSON 数组形式，便于后续的数据处理、展示或上传。
sheet_to_json 是 XLSX.utils 模块下的一个工具函数，能够将一个 Sheet 对象（即工作表）转换为 JavaScript 数组对象。
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 行） |
当 header: 1 时，sheet_to_json 会将第一行作为字段名，后续每一行对应一个对象。例如：
[
{ "姓名": "张三", "年龄": 25 },
{ "姓名": "李四", "年龄": 30 }
]
若 header: 0，则默认以 A、B、C 作为字段名，输出如下：
[
{ "A": "姓名", "B": "年龄" },
{ "A": "张三", "B": 25 }
]
可以通过 sheet_to_json 的 blankrows 参数来控制是否忽略空行，默认为 true，表示不忽略。若要忽略空行，可以结合 JavaScript 的 filter 方法处理：
const filteredData = jsonData.filter(row => Object.values(row).some(cell => cell !== null && cell !== ""));
如果你希望将 Excel 中的列头映射为自定义字段名，可以在读取后手动重命名字段：
const renamedData = jsonData.map(row => ({ name: row['姓名'], age: row['年龄'] }));
或者使用 sheet_to_json 前对 Sheet 对象进行预处理，替换原始列名。
一旦数据被转换为 JSON 数组，就可以使用常见的数组方法进行处理：
// 筛选年龄大于 25 的数据
const adults = renamedData.filter(person => person.age > 25);
// 提取所有名字
const names = renamedData.map(person => person.name);
在数据处理过程中，应加入数据校验逻辑，防止非法数据导致运行错误：
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);
}
以下是一个完整的前端读取 Excel 文件并转换为 JSON 数组的示例代码：
<input type="file" accept=".xlsx, .xls" />
<table></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];
// 转换为 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>
上述代码实现了一个完整的流程：
FileReader 读取文件；XLSX.read 解析为 Workbook；sheet_to_json 转换为 JSON；调试时建议在控制台打印中间变量：
console.log('原始数据:', jsonData);
console.log('映射后数据:', renamedData);
通过浏览器开发者工具（F12）查看控制台输出和 DOM 元素，可以快速定位问题所在。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online