JavaScript读取Excel文件实战指南

作者：袖梨 2026-06-08

简介：在JavaScript环境中，读取和处理Excel表格数据是常见的开发需求，尤其在前后端数据交互场景中。本文介绍的“xlsx.full.min.js”是一个轻量级但功能强大的JavaScript库XLSX的核心文件，它支持XLS、XLSX、CSV和JSON等多种格式的读写操作。通过FileReader API，开发者可以轻松实现用户上传Excel文件的解析与处理；同时，XLSX还支持数据转换、样式设置、公式计算等高级功能。本资料涵盖XLSX库的基本使用、核心API、数据解析方法以及性能优化技巧，帮助开发者快速掌握在前端或后端项目中集成Excel数据处理的能力。

JavaScript读取Excel文件实战指南

1. JavaScript处理Excel数据概述

随着Web应用在企业级数据处理场景中的深入应用，前端对Excel文件的操作需求日益增长。JavaScript作为前端开发的核心语言，结合现代浏览器能力，已经能够高效地实现Excel文件的读取、解析与生成。本章将引导读者理解为何在Web环境中选择JavaScript进行Excel数据处理，并探讨其背后的技术原理与常见应用场景。通过对比主流处理方案，为后续章节中将要使用的XLSX库奠定技术选型基础。

2. XLSX库简介与基础使用

XLSX库，也称为SheetJS，是一个广泛使用的开源JavaScript库，专门用于在前端和后端（Node.js）中读写Excel文件。它支持多种文件格式，包括 .xlsx 、 .xls 、 .csv 、 .ods 等，具有高度的兼容性和灵活性。在现代Web应用中，特别是在数据导入导出、报表生成和数据展示场景中，XLSX库因其轻量级、无需依赖、跨平台等特性，成为处理Excel数据的首选工具。

本章将从XLSX库的核心功能入手，逐步引导读者了解其支持的文件格式与兼容性、引入方式、基本数据结构，并搭建一个基础的开发环境，为后续章节中深入学习其读写操作与数据处理打下坚实基础。

2.1 XLSX库的核心功能概述

XLSX库的核心优势在于其强大的Excel文件处理能力，无论是读取还是写入，都能满足大多数应用场景的需求。以下将从文件格式支持与读写流程两个方面进行介绍。

2.1.1 支持的文件格式与兼容性

XLSX库支持多种电子表格格式的读写操作，主要包括：

文件格式描述是否支持读是否支持写
.xlsx Office Open XML 格式，Excel 2007+ 默认格式✅✅
.xls Excel Binary Workbook 格式，Excel 97-2003 使用✅✅
.csv 逗号分隔值文件，常用于数据交换✅✅
.ods OpenDocument Spreadsheet 格式，常用于LibreOffice/OpenOffice✅✅
.fods Flat OpenDocument Spreadsheet 格式✅✅

✅ 表示支持读写操作。

XLSX库兼容性方面表现优异，可在主流浏览器（如Chrome、Firefox、Safari）和Node.js环境中运行。此外，它不依赖任何框架（如jQuery或React），可以无缝集成到各种前端项目中。

2.1.2 读写操作的基本流程

XLSX库的基本操作流程分为以下几个步骤：

graph TD    A[读取Excel文件] --> B[解析为工作簿对象]    B --> C{选择工作表}    C --> D[提取数据]    D --> E[转换为JSON/数组]    E --> F[展示或处理数据]    G[准备数据] --> H[创建工作簿对象]    H --> I[创建工作表]    I --> J[写入Excel文件]

以读取为例，XLSX库通过 XLSX.readFile 或 XLSX.read 方法读取文件，将其解析为一个包含多个工作表的“工作簿”对象（Workbook），然后可以选择特定工作表（Sheet），并通过 XLSX.utils.sheet_to_json 等方法提取数据，最终以JSON或数组形式返回，供后续业务逻辑处理。

2.2 引入XLSX库的多种方式

根据不同的开发环境，XLSX库可以通过多种方式引入到项目中，以下将分别介绍使用CDN、Node.js安装以及结合Webpack等构建工具的方式。

2.2.1 使用CDN引入

在前端HTML页面中，最简单的方式是通过CDN引入XLSX库。以下是一个HTML示例：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>XLSX CDN 引入示例</title>    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script></head><body>    <input type="file" id="fileInput" />    <script>        document.getElementById('fileInput').addEventListener('change', function(e) {            const file = e.target.files[0];            const reader = new FileReader();            reader.onload = function(evt) {                const data = evt.target.result;                const workbook = XLSX.read(data, { type: 'binary' });                console.log(workbook);            };            reader.readAsBinaryString(file);        });    </script></body></html>

逻辑分析：

  • <script src="..."> 引入XLSX库。
  • input 元素允许用户选择Excel文件。
  • FileReader 用于读取文件内容。
  • XLSX.read(data, { type: 'binary' }) 将文件内容解析为工作簿对象。

参数说明：

  • type: 'binary' ：表示传入的数据为二进制字符串格式，适用于Excel 2007+（ .xlsx ）文件。

2.2.2 在Node.js环境中安装

在Node.js项目中，可以通过npm安装XLSX库：

npm install xlsx

安装完成后，可以在JavaScript文件中通过 require 方式引入：

const XLSX = require('xlsx');// 读取Excel文件const workbook = XLSX.readFile('example.xlsx');// 获取所有工作表名称const sheetNames = workbook.SheetNames;console.log(sheetNames);// 获取第一个工作表const sheetName = sheetNames[0];const worksheet = workbook.Sheets[sheetName];// 转换为JSON格式const jsonData = XLSX.utils.sheet_to_json(worksheet);console.log(jsonData);

逻辑分析：

  • XLSX.readFile 用于读取本地Excel文件。
  • workbook.SheetNames 是一个数组，包含所有工作表名称。
  • workbook.Sheets[sheetName] 获取指定名称的工作表对象。
  • sheet_to_json 方法将工作表转换为JSON数组。

参数说明：

  • sheet_to_json 可以接受一个配置对象，例如 { header: 1 } 表示将第一行作为数据处理，返回二维数组。

2.2.3 结合前端构建工具（如Webpack）

在使用Webpack等构建工具的项目中，可以通过ES6的 import 方式引入XLSX库：

npm install xlsx

然后在你的JavaScript模块中：

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

逻辑分析：

  • 使用 readAsArrayBuffer 读取文件为ArrayBuffer。
  • type: 'array' 表示传入的数据是ArrayBuffer类型。
  • 后续流程与Node.js中类似，获取工作表并转换为JSON。

参数说明：

  • type: 'array' 是处理ArrayBuffer时的标准参数，确保正确解析Excel文件。

2.3 初识Excel文件结构

要高效地使用XLSX库，理解Excel文件的基本结构是关键。Excel文件本质上是一个包含多个工作表的工作簿，每个工作表由行和列组成，行与列的交点即为单元格。

2.3.1 工作簿、工作表与单元格的关系

Excel文件结构可以理解为一个三层嵌套关系：

工作簿（Workbook）    └── 工作表（Sheet）        └── 单元格（Cell）
  • 工作簿（Workbook） ：整个Excel文件，通常以 .xlsx 或 .xls 为后缀。
  • 工作表（Sheet） ：工作簿中的一张表格，一个工作簿可以包含多个工作表，默认名称如 Sheet1 , Sheet2 等。
  • 单元格（Cell） ：工作表中的最小单位，用于存储数据、公式、样式等信息。

在XLSX库中，这些结构通过以下对象表示：

  • workbook.SheetNames : 包含所有工作表名称的数组。
  • workbook.Sheets : 一个对象，键为工作表名称，值为工作表对象（Sheet）。
  • worksheet['A1'] : 表示A1单元格的数据对象。

2.3.2 行、列与单元格的索引方式

XLSX库中的单元格索引方式遵循Excel的标准格式：

  • 列索引 ：使用字母表示，如 A , B , …, Z , AA , AB 等。
  • 行索引 ：使用数字表示，从1开始，如 1 , 2 , 3 等。
  • 单元格地址 ：由列和行组合而成，如 A1 , B2 , C10 等。

XLSX库提供了工具函数用于处理这些索引：

const XLSX = require('xlsx');// 将列索引转换为数字const colNum = XLSX.utils.decode_col('C'); // 返回 2（从0开始）// 将行索引转换为数字const rowNum = XLSX.utils.decode_row('5'); // 返回 4（从0开始）// 将地址解析为对象const cellAddress = XLSX.utils.decode_cell('B3');console.log(cellAddress); // 输出 { c: 1, r: 2 }// 将对象转换为地址字符串const address = XLSX.utils.encode_cell({ c: 1, r: 2 }); // 返回 "B3"

逻辑分析：

  • decode_col 和 decode_row 用于将Excel格式的列/行索引转换为程序中使用的数字。
  • decode_cell 和 encode_cell 实现地址字符串与对象之间的转换。

2.4 开发环境搭建与测试用例准备

在正式进行Excel数据处理前，需要搭建一个基础的开发环境，并准备测试用例以验证代码功能。

2.4.1 创建HTML页面并引入XLSX库

我们可以通过一个简单的HTML页面来测试XLSX库的功能：

<!DOCTYPE html><html lang="zh"><head>    <meta charset="UTF-8">    <title>XLSX 测试页面</title>    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script></head><body>    <h2>上传Excel文件</h2>    <input type="file" id="upload" accept=".xlsx,.xls,.csv" />    <h3>解析结果：</h3>    <pre id="output"></pre>    <script>        document.getElementById('upload').addEventListener('change', function(e) {            const file = e.target.files[0];            const reader = new FileReader();            reader.onload = function(evt) {                const data = evt.target.result;                const workbook = XLSX.read(data, { type: 'binary' });                const firstSheet = workbook.Sheets[workbook.SheetNames[0]];                const json = XLSX.utils.sheet_to_json(firstSheet);                document.getElementById('output').textContent = JSON.stringify(json, null, 2);            };            reader.readAsBinaryString(file);        });    </script></body></html>

功能说明：

  • 用户选择Excel文件后，通过 FileReader 读取文件内容。
  • 使用 XLSX.read 解析为工作簿对象。
  • 获取第一个工作表并将其转换为JSON格式。
  • 显示解析结果。

2.4.2 准备测试Excel文件

为了验证上述代码的功能，我们可以准备一个简单的Excel测试文件，例如：

姓名年龄城市
张三28北京
李四32上海
王五25广州

将上述内容保存为 test.xlsx ，上传到测试页面后，应能看到如下JSON输出：

[  {    "姓名": "张三",    "年龄": 28,    "城市": "北京"  },  {    "姓名": "李四",    "年龄": 32,    "城市": "上海"  },  {    "姓名": "王五",    "年龄": 25,    "城市": "广州"  }]

通过这个简单的测试，我们验证了XLSX库的基本读取和解析功能，为后续深入学习数据处理、格式转换、写入操作等打下了良好的基础。

3. 读取与解析Excel文件

在现代Web应用中，处理Excel文件已经成为数据交互和展示的重要环节。JavaScript通过强大的第三方库如 SheetJS （即 xlsx 库），为前端开发者提供了高效、灵活的Excel文件处理能力。本章将围绕 读取与解析Excel文件 展开，详细介绍如何使用 xlsx 库来加载、解析Excel文件，并提取其中的数据，同时对数据的格式、空值、公式等进行处理。

3.1 读取Excel文件的基本方法

在使用JavaScript处理Excel文件之前，首先需要将文件加载到内存中。 xlsx 库提供了多种方式来读取Excel文件，主要包括：

  • XLSX.readFile() ：用于读取本地文件（适用于Node.js环境）
  • XLSX.read() ：用于处理Base64编码字符串或ArrayBuffer（适用于浏览器环境）

3.1.1 使用readFile方法加载本地文件

XLSX.readFile() 方法适用于Node.js环境下读取本地磁盘上的Excel文件。

const XLSX = require('xlsx');const workbook = XLSX.readFile('data.xlsx');
代码逻辑分析：
  • 第1行：引入 xlsx 模块。
  • 第2行：使用 readFile 方法加载名为 data.xlsx 的Excel文件，返回一个工作簿对象 workbook 。
参数说明：
  • 'data.xlsx' ：表示Excel文件的路径，可以是相对路径或绝对路径。
  • workbook ：是一个包含整个Excel文件结构的对象，包括多个工作表。
适用场景：

该方法适用于后端Node.js环境下的Excel文件处理，如导入数据、批量处理等场景。

3.1.2 使用read方法处理Base64或ArrayBuffer数据

在浏览器环境中，通常通过 FileReader 读取用户上传的文件，获取其ArrayBuffer或Base64编码后，再通过 XLSX.read() 进行解析。

const fileInput = document.getElementById('file');fileInput.addEventListener('change', function (e) {    const file = e.target.files[0];    const reader = new FileReader();    reader.onload = function (evt) {        const data = evt.target.result;        const workbook = XLSX.read(data, { type: 'array' }); // 或 'base64'    };    reader.readAsArrayBuffer(file);});
代码逻辑分析：
  • 第1-2行：获取文件输入元素并监听其变化事件。
  • 第3行：创建一个 FileReader 对象。
  • 第5-9行：当文件读取完成后，调用 XLSX.read() 解析Excel数据。
  • 第11行：以 ArrayBuffer 格式读取文件内容。
参数说明：
  • data ：文件内容，可以是ArrayBuffer或Base64字符串。
  • { type: 'array' } ：指定输入数据类型为 ArrayBuffer ，若使用Base64则应为 { type: 'base64' } 。
浏览器兼容性说明：

该方法在主流浏览器中均支持，是前端处理Excel文件的常用手段。

3.2 解析Excel工作簿与工作表

Excel文件通常由一个或多个工作簿（Workbook）组成，每个工作簿包含多个工作表（Worksheet）。解析Excel的核心在于理解其结构并从中提取所需数据。

3.2.1 获取工作簿中的所有工作表名称

加载完Excel文件后，可以通过 workbook.SheetNames 获取所有工作表的名称。

const sheetNames = workbook.SheetNames;console.log(sheetNames); // 输出如: ['Sheet1', 'Sheet2']
代码逻辑分析：
  • 第1行：获取工作簿中所有工作表的名称列表。
  • 第2行：打印出工作表名称数组。
数据结构说明：
  • workbook.SheetNames 返回一个数组，包含每个工作表的名称字符串。

3.2.2 根据名称或索引获取指定工作表

通过工作表名称可以直接获取对应的工作表对象，也可以通过索引访问。

const sheetName = sheetNames[0];const worksheet = workbook.Sheets[sheetName];
代码逻辑分析：
  • 第1行：获取第一个工作表的名称。
  • 第2行：通过名称从 workbook.Sheets 中获取工作表对象。
工作表对象结构说明：
  • worksheet 是一个对象，其键为单元格地址（如”A1”），值为包含单元格值的对象（如 { v: "Hello", t: "s" } ）。
示例结构：
{  "A1": { v: "Name", t: "s" },  "B1": { v: "Age", t: "s" },  "A2": { v: "Alice", t: "s" },  "B2": { v: 30, t: "n" }}

3.3 数据提取与格式处理

在获取到工作表对象后，下一步是提取数据并将其转换为更易处理的格式（如JSON）。

3.3.1 将工作表数据转换为JSON格式

XLSX.utils.sheet_to_json() 函数可以将工作表转换为JSON数组。

const jsonData = XLSX.utils.sheet_to_json(worksheet);console.log(jsonData);
代码逻辑分析：
  • 第1行：使用 sheet_to_json 函数将工作表转换为JSON格式。
  • 第2行：打印出转换后的数据。
输出示例：

[

  { "Name": "Alice", "Age": 30 },

  { "Name": "Bob", "Age": 25 }

]

参数说明：
  • 默认情况下， sheet_to_json() 会将第一行作为字段名（key）。
  • 可以通过设置选项控制行为，如：
XLSX.utils.sheet_to_json(worksheet, { header: 1 }); // 返回二维数组

3.3.2 使用sheet_to_json函数提取数据

除了默认转换方式，还可以通过配置选项控制输出格式。

const options = {  header: 1,          // 返回二维数组  raw: true,          // 不解析单元格格式  range: 1            // 自动检测范围};const dataArray = XLSX.utils.sheet_to_json(worksheet, options);
代码逻辑分析：
  • 第1-5行：定义转换选项。
  • 第7行：使用选项进行数据提取。
参数说明：
参数名说明
header 若为1，则第一行作为数组索引；若为其他值，则作为字段名
raw 若为true，则不自动转换单元格格式（如日期、数字）
range 控制数据范围，若为1则自动检测有效数据区域

3.3.3 处理空值、公式与样式信息

在实际数据中，可能会遇到空值、公式、样式等复杂情况，需进行特殊处理。

1. 处理空值

空单元格在转换为JSON时可能被忽略，可以通过设置 defval 参数来填充默认值。

const jsonData = XLSX.utils.sheet_to_json(worksheet, { defval: null });
2. 解析公式

默认情况下，公式不会被解析，只返回公式字符串。若需获取公式计算结果，需启用 cellFormula 选项：

const workbook = XLSX.read(data, { cellFormula: true });

此时，单元格对象中将包含 .f 字段，表示公式本身， .v 字段表示计算结果。

3. 读取样式信息

样式信息默认不会被保留，若需读取样式，需在读取时启用 cellStyles 选项：

const workbook = XLSX.read(data, { cellStyles: true });

此时，每个单元格对象中将包含 .s 字段，表示样式信息（如字体、颜色、边框等）。

总结与延伸

本章深入讲解了如何使用JavaScript结合 xlsx 库读取与解析Excel文件。从文件加载、工作簿结构解析，到数据提取与格式处理，我们掌握了以下关键能力：

  • 如何在Node.js和浏览器环境中读取Excel文件；
  • 如何获取工作表并解析其结构；
  • 如何将工作表数据转换为JSON格式；
  • 如何处理空值、公式与样式信息。

在下一章中，我们将进一步探讨如何将解析后的数据重新生成Excel文件，并支持多种格式之间的转换，实现完整的Excel数据处理闭环。

4. 数据转换与表格生成

在现代Web应用中，数据的双向转换能力尤为重要。Excel作为数据交互的通用格式，不仅需要支持从Excel读取数据并转换为结构化数据（如JSON），也需要能够将前端处理后的数据反向写入Excel，实现数据闭环。本章将重点讲解如何使用XLSX库将结构化数据（如JSON、二维数组）转换为Excel表格，并生成可下载或传输的Excel文件。同时，我们还将探讨不同格式（如CSV、JSON）与Excel之间的互操作，以及在处理大型数据集时的性能优化策略。

4.1 从JSON数据生成Excel工作表

XLSX库提供了将JSON数据直接转换为Excel工作表的能力，这对于前端生成报表、导出用户数据等场景非常实用。核心方法是使用 XLSX.utils.json_to_sheet 函数。

4.1.1 使用json_to_sheet函数创建工作表

json_to_sheet 函数接收一个JSON数组作为输入，并将其转换为Excel工作表对象。该函数会自动识别字段名作为表头，并逐行填充数据。

const jsonData = [    { name: "张三", age: 28, department: "技术部" },    { name: "李四", age: 32, department: "市场部" },    { name: "王五", age: 25, department: "财务部" }];const ws = XLSX.utils.json_to_sheet(jsonData);

逐行解释：

  • jsonData ：是一个包含对象的数组，每个对象代表一行数据。
  • XLSX.utils.json_to_sheet(jsonData) ：将该数组转换为一个工作表对象 ws ，该对象可以添加到工作簿中。

4.1.2 添加表头与字段映射

有时我们需要自定义表头或字段顺序，可以使用 header 选项来指定字段顺序，或者使用 skipHeader 跳过自动生成的表头。

const ws = XLSX.utils.json_to_sheet(jsonData, {    header: ["department", "name", "age"],    skipHeader: false});

参数说明：

  • header ：指定字段顺序，若未指定则按对象第一个元素的键顺序生成。
  • skipHeader ：是否跳过表头，默认为 false ，设为 true 时不生成表头行。

效果对比：

参数设置表头顺序
未指定headername, age, department
指定header为[“department”, “name”, “age”]department, name, age

4.2 二维数组与工作表的互操作

除了JSON数据，XLSX库也支持将二维数组转换为工作表。这在处理表格数据或导出HTML表格内容时非常实用。

4.2.1 使用aoa_to_sheet处理二维数组

aoa_to_sheet 函数用于将二维数组转换为工作表对象，适合处理已有的二维结构数据。

const data = [    ["姓名", "年龄", "部门"],    ["张三", 28, "技术部"],    ["李四", 32, "市场部"],    ["王五", 25, "财务部"]];const ws = XLSX.utils.aoa_to_sheet(data);

逐行解释：

  • data ：是一个二维数组，第一行为表头，后续为数据行。
  • XLSX.utils.aoa_to_sheet(data) ：将该数组转换为工作表对象。

4.2.2 向现有工作表追加数据（sheet_add_aoa）

如果已有工作表，可以使用 sheet_add_aoa 方法追加数据。

const newData = [    ["赵六", 29, "行政部"],    ["钱七", 31, "研发部"]];XLSX.utils.sheet_add_aoa(ws, newData, { origin: -1 });

参数说明：

  • ws ：已有的工作表对象。
  • newData ：要追加的二维数组。
  • origin: -1 ：表示从最后一行之后开始追加。

mermaid流程图： 

graph TD    A[准备二维数组] --> B[创建工作表]    B --> C[已有工作表]    C --> D[准备新数据]    D --> E[调用 sheet_add_aoa]    E --> F[追加数据至工作表]

4.3 创建与写入Excel文件

在完成工作表的构建后，下一步是将其写入一个完整的Excel文件，并支持下载或传输。

4.3.1 使用writeFile方法保存Excel文件

XLSX.writeFile 函数可以将工作簿保存为本地文件。

const wb = XLSX.utils.book_new();XLSX.utils.book_append_sheet(wb, ws, "员工信息");XLSX.writeFile(wb, "员工数据.xlsx");

逐行解释：

  • XLSX.utils.book_new() ：创建一个新的工作簿。
  • book_append_sheet ：将工作表 ws 添加到工作簿中，并命名为“员工信息”。
  • writeFile(wb, "员工数据.xlsx") ：将工作簿保存为名为 员工数据.xlsx 的Excel文件。

4.3.2 使用write方法生成Base64或Blob数据

如果需要将Excel文件作为Base64字符串或Blob对象传输（如上传至服务器或预览），可以使用 XLSX.write 方法。

const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });const blob = new Blob([excelBuffer], { type: 'application/octet-stream' });

参数说明：

  • bookType ：指定输出格式，如 xlsx 、 xls 、 csv 等。
  • type ：输出类型，支持 base64 、 binary 、 array 等。

转换方式对比：

输出类型特点适用场景
base64可用于嵌入网页或传输接口传输、预览
array可转换为Blob对象文件下载、上传
binary原始二进制字符串低层处理、兼容旧系统

4.4 支持多种格式的转换

XLSX库不仅支持Excel格式，还支持CSV、JSON等常见格式的互操作。这对于构建通用的数据导出功能非常有用。

4.4.1 CSV、JSON与Excel之间的相互转换

JSON转CSV
const csvData = XLSX.utils.sheet_to_csv(ws);console.log(csvData);

输出示例：

姓名,年龄,部门

张三,28,技术部

李四,32,市场部

王五,25,财务部

CSV转Excel
const ws = XLSX.utils.csv_to_sheet(csvData);
JSON转Excel（前面已讲）

4.4.2 处理大型数据集时的性能优化

在处理大型数据集（如数万行）时，XLSX库的性能可能会成为瓶颈。以下是几种优化策略：

  1. 分页处理 ：将大数据拆分为多个工作表或多个文件。
  2. 减少样式与公式 ：避免写入样式和公式，仅导出纯文本数据。
  3. 使用流式处理 ：在Node.js环境中使用流（stream）处理大文件，避免内存溢出。
  4. Web Worker处理 ：在前端将数据处理逻辑放入Web Worker中，避免阻塞主线程。

优化建议对比表：

优化方式优点缺点
分页处理降低单个文件大小增加文件数量
禁用样式提高导出速度丢失格式
流式处理支持超大文件需Node.js环境
Web Worker不阻塞UI实现复杂度高

mermaid流程图： 

graph TD    A[开始处理大型数据] --> B{是否使用分页?}    B -->|是| C[分批次导出]    B -->|否| D{是否禁用样式?}    D -->|是| E[纯数据导出]    D -->|否| F[保留样式]    A --> G[使用流式处理（Node.js）]    G --> H[避免内存溢出]

通过本章内容，我们已经掌握了如何将JSON或二维数组转换为Excel表格，并进一步生成Excel文件。同时，我们还了解了如何在不同格式之间进行互操作，以及在处理大型数据集时的性能优化策略。这些技能在实际开发中极具实用价值，无论是前端数据导出还是后端批量处理，都能显著提升开发效率与用户体验。

5. Excel数据处理实战与扩展功能

5.1 前端Excel数据展示实战

在前几章中，我们已经掌握了如何使用XLSX库读取Excel文件、解析数据并转换为JSON格式。本节将基于这些基础操作，展示如何将解析后的数据在网页中进行动态展示，实现前端数据可视化。

5.1.1 在网页中展示解析后的Excel数据

我们可以通过HTML的 <input type="file"> 元素让用户上传Excel文件，然后利用XLSX库进行解析，最后将结果渲染到页面上。以下是一个完整的示例：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Excel 数据展示</title>    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script></head><body>    <h2>上传Excel文件以查看数据</h2>    <input type="file" id="excelFile" accept=".xlsx,.xls" />    <div id="tableContainer"></div>    <script>        document.getElementById('excelFile').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 firstSheetName = workbook.SheetNames[0];                const worksheet = workbook.Sheets[firstSheetName];                // 将工作表数据转换为JSON格式                const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });                // 渲染为HTML表格                const tableHTML = '<table border="1">';                jsonData.forEach((row) => {                    tableHTML += '<tr>';                    row.forEach((cell) => {                        tableHTML += `<td>${cell || ''}</td>`;                    });                    tableHTML += '</tr>';                });                tableHTML += '</table>';                document.getElementById('tableContainer').innerHTML = tableHTML;            };            reader.readAsArrayBuffer(file);        });    </script></body></html>

5.1.2 使用表格组件动态渲染数据

在实际开发中，为了增强用户体验和交互性，推荐使用成熟的前端表格组件，如 DataTables 或 AG Grid 。下面展示如何将解析后的Excel数据绑定到 DataTables 表格中：

<!-- 引入 DataTables --><link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css" rel="external nofollow" ><script src="https://code.jquery.com/jquery-3.7.0.min.js"></script><script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script><!-- 表格容器 --><table id="dataTable" class="display" style="width:100%"></table><script>    // 假设 jsonData 是之前解析的 Excel 数据    const table = $('#dataTable').DataTable({        data: jsonData,        columns: jsonData[0].map((_, i) => ({ title: `列${i+1}` })),        paging: true,        searching: true,        info: true    });</script>

说明 ： jsonData 是一个二维数组，其中每一项代表一行数据。通过映射第一行数据来动态生成列标题，并使用 DataTables 的 API 实现分页、搜索等功能。

5.2 前后端数据交互与Excel处理流程

在实际项目中，Excel文件往往需要上传至服务器进行处理或存储。本节将介绍如何从前端上传文件，后端接收并解析Excel，最后返回处理后的数据。

5.2.1 前端上传Excel文件并发送至后端

前端可以通过 FormData 和 fetch 实现文件上传。示例代码如下：

document.getElementById('excelFile').addEventListener('change', function(e) {    const file = e.target.files[0];    const formData = new FormData();    formData.append('file', file);    fetch('/api/upload-excel', {        method: 'POST',        body: formData    })    .then(response => response.json())    .then(data => {        console.log('后端返回数据:', data);        // 可以将 data 渲染到页面上    })    .catch(error => {        console.error('上传失败:', error);    });});

5.2.2 后端处理数据并返回结果

以 Node.js + Express 为例，后端使用 multer 处理文件上传，使用 xlsx 库解析 Excel 数据：

const express = require('express');const multer = require('multer');const XLSX = require('xlsx');const app = express();const upload = multer({ dest: 'uploads/' });app.post('/api/upload-excel', upload.single('file'), (req, res) => {    const workbook = XLSX.readFile(req.file.path);    const sheetName = workbook.SheetNames[0];    const worksheet = workbook.Sheets[sheetName];    const jsonData = XLSX.utils.sheet_to_json(worksheet);    res.json(jsonData);});app.listen(3000, () => {    console.log('服务器运行于 http://localhost:3000');});

流程说明：

1. 用户上传Excel文件；

2. 前端通过 fetch 将文件发送到后端；

3. 后端接收文件并解析为JSON；

4. 后端将解析结果返回给前端；

5. 前端将结果渲染为表格或图表。

5.3 高级功能探索：公式与样式支持

默认情况下，XLSX库在解析Excel文件时不会保留公式和样式信息。但在某些高级场景下，我们需要保留这些元数据。本节将介绍如何启用这些功能。

5.3.1 解析并保留Excel中的公式

XLSX库默认只解析单元格的显示值，不解析公式内容。要获取公式，可以在 sheet_to_json 方法中设置 raw: false 并访问 s （start）和 e （end）属性来获取单元格范围。

const workbook = XLSX.read(data, { type: 'array', cellFormula: true });workbook.SheetNames.forEach(sheetName => {    const worksheet = workbook.Sheets[sheetName];    const range = XLSX.utils.decode_range(worksheet['!ref']);    for (let R = range.s.r; R <= range.e.r; ++R) {        for (let C = range.s.c; C <= range.e.c; ++C) {            const cellAddress = XLSX.utils.encode_cell({ r: R, c: C });            const cell = worksheet[cellAddress];            if (cell && cell.f) {                console.log(`单元格 ${cellAddress} 的公式为: ${cell.f}`);            }        }    }});

参数说明：

- cellFormula: true ：启用公式解析；

- cell.f ：表示单元格中的公式字符串。

5.3.2 读取与写入单元格样式信息

样式信息的读取和写入相对复杂，XLSX库支持通过 cellStyles: true 来启用样式解析：

const workbook = XLSX.read(data, { type: 'array', cellStyles: true });workbook.SheetNames.forEach(sheetName => {    const worksheet = workbook.Sheets[sheetName];    const range = XLSX.utils.decode_range(worksheet['!ref']);    for (let R = range.s.r; R <= range.e.r; ++R) {        for (let C = range.s.c; C <= range.e.c; ++C) {            const cellAddress = XLSX.utils.encode_cell({ r: R, c: C });            const cell = worksheet[cellAddress];            if (cell && cell.s) {                console.log(`单元格 ${cellAddress} 的样式为:`, cell.s);            }        }    }});

说明：

- cell.s ：指向 workbook.SSF 中的样式索引；

- 样式数据存储在 workbook.SSF 和 workbook.CS 中。

5.4 扩展应用场景与未来展望

5.4.1 在数据分析与可视化中的应用

结合前端图表库如 ECharts 或 Chart.js，可以将Excel数据解析后用于动态图表展示。例如，我们可以将Excel中的销售数据解析为JSON，并使用 ECharts 生成柱状图：

<div id="chart" style="width:600px;height:400px;"></div><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script><script>    const chart = echarts.init(document.getElementById('chart'));    const option = {        title: { text: '销售数据' },        tooltip: {},        xAxis: { data: jsonData.map(row => row[0]) },  // 假设第一列为名称        yAxis: { type: 'value' },        series: [{            name: '销售额',            type: 'bar',            data: jsonData.slice(1).map(row => row[1])  // 假设第二列为数值        }]    };    chart.setOption(option);</script>

5.4.2 与后端服务集成实现自动化报表生成

将前端Excel上传、后端数据处理、模板引擎（如 Handlebars）结合，可实现自动化报表生成功能。例如：

  1. 用户上传Excel模板；
  2. 后端解析数据并填充模板；
  3. 生成新的Excel文件并返回给用户下载。

这种模式广泛应用于企业级数据报表系统、财务系统、自动化办公流程中。

相关文章

精彩推荐