跳到主要内容 JavaScript 前端读取 Excel 文件实战指南 | 极客日志
JavaScript Node.js 大前端
JavaScript 前端读取 Excel 文件实战指南 介绍使用 JavaScript 库 js-xlsx 在前端解析 Excel 文件的方法。涵盖安装配置、通过 FileReader 读取二进制数据、Workbook 与 Sheet 对象结构解析、数据转换为 JSON 数组及常见错误处理。提供 Vue/React 示例及多工作表切换方案,适用于数据导入与报表场景。
落日余晖 发布于 2026/4/6 更新于 2026/4/17 8 浏览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 的核心功能 功能模块 功能描述 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 方式安装:
安装完成后,在 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);
}
代码逻辑说明 :
使用 FileReader 读取用户上传的 Excel 文件。
通过 XLSX.read 将文件内容转换为 workbook 对象。
获取第一个工作表并通过 sheet_to_json 转换为 JSON 格式。
2.2.2 在 HTML 中直接引入 CDN 链接 对于不使用模块化构建的简单项目或静态页面,可以通过 CDN 引入 js-xlsx:
<script src ="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js" > </script >
此方式无需任何构建步骤,直接在浏览器中使用全局变量 XLSX。
示例代码:HTML 中使用 CDN 引入并读取 Excel <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 数组。
2.2.3 模块化开发中的导入方式 在使用模块化框架(如 Vue、React、Angular)时,建议使用 import 方式引入 xlsx,以便更好地管理依赖与打包体积。
Vue 项目示例: <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。
打印解析结果到控制台。
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" accept =".xlsx,.xls" />
document .getElementById ('excelFile' ).addEventListener ('change' , function (e ) {
const file = e.target .files [0 ];
if (file) {
const reader = new FileReader ();
reader.onload = function (event ) {
const data = new Uint8Array (event.target .result );
const workbook = XLSX .read (data, { type : 'array' });
console .log (workbook);
};
reader.readAsArrayBuffer (file);
}
});
⚠️ 注意: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 booleanfalse是否将日期单元格转换为 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 );
Sheets 对象 每个工作表数据以键值对形式存储在 Sheets 对象中,例如:
const sheet = workbook.Sheets ['Sheet1' ];
console .log (sheet['A1' ]);
属性 类型 描述 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 );
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);
代码解析:
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 的原始数据格式 {
"!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 表格是常见的需求。以下是一个完整的实现示例:
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 切换的前端实现 为了实现多工作表切换功能,可以添加下拉框让用户选择工作表名称,然后动态加载并渲染对应数据。
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 ,
raw : true
});
参数名 类型 默认值 描述 headernumber / array 1 设置哪一行作为字段名(如 header: 1 表示第一行为字段名) defvalany undefined 当单元格为空时填充的默认值 rawboolean false 是否保留原始数据类型(不转换数字、日期等) rangenumber 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 数组,就可以使用常见的数组方法进行处理:
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" 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];
const jsonData = XLSX .utils .sheet_to_json (worksheet, { header : 1 });
const renamedData = jsonData.slice (1 ).map (row => ({ name : row[0 ], age : row[1 ] }));
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 实际运行效果与调试技巧
用户选择 Excel 文件;
通过 FileReader 读取文件;
使用 XLSX.read 解析为 Workbook;
使用 sheet_to_json 转换为 JSON;
映射字段并渲染到 HTML 表格。
console .log ('原始数据:' , jsonData);
console .log ('映射后数据:' , renamedData);
通过浏览器开发者工具(F12)查看控制台输出和 DOM 元素,可以快速定位问题所在。
微信扫一扫,关注极客日志 微信公众号「极客日志」,在微信中扫描左侧二维码关注。展示文案:极客日志 zeeklog
相关免费在线工具 Keycode 信息 查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具,Keycode 信息在线工具,online
Escape 与 Native 编解码 JavaScript 字符串转义/反转义;Java 风格 \uXXXX(Native2Ascii)编码与解码。 在线工具,Escape 与 Native 编解码在线工具,online
JavaScript / HTML 格式化 使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具,JavaScript / HTML 格式化在线工具,online
JavaScript 压缩与混淆 Terser 压缩、变量名混淆,或 javascript-obfuscator 高强度混淆(体积会增大)。 在线工具,JavaScript 压缩与混淆在线工具,online
Base64 字符串编码/解码 将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online
Base64 文件转换器 将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online