JavaScript读取Excel文件实战指南

在Ja vaScript环境中，读取和处理Excel表格数据是开发者常会遇到的需求，特别是在前后端数据交互的场景里。今天要聊的“xlsx.full.min.js”这个文件，其实是轻量级且功能强大的Ja vaScript库——XLSX的核心文件。它支持XLS、XLSX、CSV和JSON等多种格式的读写操作。配合FileReader API，开发者可以轻松实现用户上传Excel文件的解析与处理；同时，XLSX还支持数据转换、样式设置、公式计算等高级功能。本文会涵盖XLSX库的基本使用、核心API、数据解析方法以及性能优化技巧，帮助读者快速掌握在前端或后端项目中集成Excel数据处理的能力。

1. Ja vaScript处理Excel数据概述

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

2. XLSX库简介与基础使用

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

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

2.1 XLSX库的核心功能概述

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

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

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

✅ 表示支持读写操作。

兼容性方面，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示例：

逻辑分析：

• 
  
  
  

  上传一个 Excel 文件试试

  
  
  

  解析结果：

  
  
  
  
  
  

  这段代码做了三件事：

  
  
  1. 通过 让用户选择一个 .xlsx 或 .xls 文件
  
  
  2. 用 FileReader 以二进制字符串形式读取文件内容
  
  
  3. 交给 XLSX.read() 解析，再取第一个工作表并转成 JSON，显示在页面上
  
  

  2.4.2 准备一份最简单的测试数据

  为了快速验证，可以在 Excel 里做一个三行示例表：

  
  
  
  
  
  
  
  
  
  
  
  

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

  保存为 test.xlsx，再用上面那个页面上传 —— 如果看到了类似下面的输出，说明基本流程已经跑通了：

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

  这个测试虽简单，但它确认了两件事：文件能被正确读取、XLSX 库能按预期工作。接下来就可以正式进入数据处理环节。

  3. 读取与解析Excel文件

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

  3.1 读取Excel文件的基本方法

  在用Ja vaScript处理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字段，表示样式信息（如字体、颜色、边框等）。

  总结与延伸

  本章深入讲解了如何使用Ja vaScript结合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时不生成表头行。

  效果对比：

  参数设置	表头顺序
  未指定header	name, 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的元素让用户上传Excel文件，然后利用XLSX库进行解析，最后将结果渲染到页面上。下面是一个完整的示例：

                  
  上传Excel文件以查看数据
          
      

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

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

  说明：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生成柱状图：

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

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

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

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