提高数据处理效率:JavaScript 操作 XLSX 文件的最佳实践

前言

Excel 文件(通常以 .xlsx 为后缀)在各种业务场景中都有广泛应用,如数据分析、财务报告和其他数据表单处理。掌握如何在前端或后端使用 JavaScript 对这些 Excel 文件进行读取、创建和修改,能够显著提升我们的开发效率和数据处理能力。
本文将深入探讨如何使用强大的 xlsx 库来操作 Excel 文件。我们将涵盖如何在 Node.js 和浏览器环境中读取 Excel 文件、创建新的 Excel 文件、修改现有的 Excel 文件以及处理复杂的 Excel 数据结构。

常用操作

读取 Excel 文件

在 Node.js 环境中读取本地文件

在 Node.js 环境中,我们可以轻松地读取本地的 Excel 文件。以下示例展示了如何读取本地的 example.xlsx 文件并将其内容转换为 JSON 格式:

const XLSX = require('xlsx');
const workbook = XLSX.readFile('example.xlsx');

// 获取第一个工作表
const sheetName = workbook.SheetNames[0];
const worksheet = workbook.Sheets[sheetName];

// 将工作表转换为 JSON 数据
const data = XLSX.utils.sheet_to_json(worksheet);

console.log(data);

在浏览器环境中读取用户上传的文件

在浏览器环境中,处理用户上传的文件是常见需求。以下示例展示了如何结合 HTML 的

<input type="file"> 元素读取用户上传的 Excel 文件:
<input type="file" id="upload" accept=".xlsx" />

<script>
document.getElementById('upload').addEventListener('change', handleFile, false);

function handleFile(event) {
    const file = event.target.files[0];
    const reader = new FileReader();
    reader.onload = function(e) {
        const data = new Uint8Array(e.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);

        console.log(jsonData);
    };

    reader.readAsArrayBuffer(file);
}
</script>

创建 Excel 文件

创建并下载新的 Excel 文件是另一个常见需求。以下示例展示了如何生成包含示例数据的 Excel 文件,并允许用户下载:

<button id="download">下载 Excel 文件</button>

<script>
document.getElementById('download').addEventListener('click', function() {
    // 创建数据
    const data = [
        { "Name": "John", "Age": 30, "City": "New York" },
        { "Name": "Peter", "Age": 25, "City": "London" },
        { "Name": "Sara", "Age": 22, "City": "Paris" }
    ];

    // 将数据转换为工作表
    const worksheet = XLSX.utils.json_to_sheet(data);

    // 创建工作簿并添加工作表
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");

    // 生成 Excel 文件并下载
    XLSX.writeFile(workbook, 'example.xlsx');
});
</script>

修改 Excel 文件

修改现有的 Excel 文件也是常见的操作需求。以下示例展示了如何读取 Excel 文件、修改某个单元格的值并保存修改后的文件:

const XLSX = require('xlsx');
const workbook = XLSX.readFile('example.xlsx');

const sheetName = workbook.SheetNames[0];
const worksheet = workbook.Sheets[sheetName];

// 修改单元格 A1 的值
worksheet['A1'].v = 'Modified Value';

// 保存修改后的文件
XLSX.writeFile(workbook, 'modified_example.xlsx');

进阶操作

1. 处理多个工作表

如果 Excel 文件包含多个工作表,我们可以遍历所有工作表并处理每个工作表的数据:

const XLSX = require('xlsx');
const workbook = XLSX.readFile('example.xlsx');

// 遍历所有工作表
workbook.SheetNames.forEach(sheetName => {
    const worksheet = workbook.Sheets[sheetName];
    const data = XLSX.utils.sheet_to_json(worksheet);
    console.log(Sheet: ${sheetName}, data);
});

2. 处理复杂的数据结构

处理嵌套的表格或进行数据清洗需要使用 JavaScript 的数组和对象方法:

const XLSX = require('xlsx');
const workbook = XLSX.readFile('complex_example.xlsx');

const sheetName = workbook.SheetNames[0];
const worksheet = workbook.Sheets[sheetName];

// 将工作表转换为 JSON 数据
const data = XLSX.utils.sheet_to_json(worksheet);

// 清洗数据,去除空值并计算某一列的总和
const cleanedData = data.filter(row => row['Value'] !== null && row['Value'] !== undefined);
const totalValue = cleanedData.reduce((sum, row) => sum + row['Value'], 0);

console.log('Cleaned Data:', cleanedData);
console.log('Total Value:', totalValue);

3. 指定单元格格式

const XLSX = require('xlsx');
const data = [
    { "Date": new Date(), "Amount": 123.45 }
];

const worksheet = XLSX.utils.json_to_sheet(data);
worksheet['A1'].z = 'mm/dd/yyyy'; // 指定日期格式
worksheet['B1'].z = '#,##0.00';  // 指定数字格式

const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
XLSX.writeFile(workbook, 'formatted_example.xlsx');

4. 合并单元格

const XLSX = require('xlsx');
const workbook = XLSX.utils.book_new();
const worksheet = XLSX.utils.aoa_to_sheet([
    ['Title1', null, 'Title2'],
    ['Data1', 'Data2', 'Data3']
]);

// 合并单元格 A1 和 B1
worksheet['!merges'] = [
    { s: { r: 0, c: 0 }, e: { r: 0, c: 1 } } // s 是开始单元格,e 是结束单元格
];

XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
XLSX.writeFile(workbook, 'merged_cells_example.xlsx');

5. 设置单元格样式

虽然 xlsx 库本身对样式支持有限,但可以借助 exceljs 库来实现更丰富的样式设置:

const ExcelJS = require('exceljs');
const workbook = new ExcelJS.Workbook();
const worksheet = workbook.addWorksheet('Sheet1');

worksheet.columns = [
    { header: 'Name', key: 'name' },
    { header: 'Age', key: 'age' },
    { header: 'City', key: 'city' }
];

worksheet.addRow({ name: 'John', age: 30, city: 'New York' });

// 设置列宽和单元格样式
worksheet.getColumn('name').width = 20;
worksheet.getRow(1).font = { bold: true };
worksheet.getCell('A2').fill = {
    type: 'pattern',
    pattern: 'solid',
    fgColor: { argb: 'FFFF0000' }
};

workbook.xlsx.writeFile('styled_example.xlsx');

总结

本文详细介绍了如何使用 JavaScript 操作 XLSX 文件,涵盖读取、创建和修改文件的基本操作以及处理复杂数据和应用常用技巧。通过灵活运用 xlsx 库,开发者可以在前端和后端环境中高效地处理 Excel 文件,从而提升数据处理和分析的效率。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/916287.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Window主机访问Ubuntu从机——Xrdp配置与使用】

使用Xrdp在Window环境下远程桌面访问Ubuntu主机 文章目录 Ubuntu安装图形化界面Ubuntu安装Xrdp通过网线连接两台主机Window主机有线连接配置Ubuntu从机设置测试有线连接 Window主机打开远程桌面功能参考文章总结 Ubuntu安装图形化界面 sudo apt update sudo apt upgrade sudo …

stable-diffusion-3 ,每天免费试用

https://huggingface.co/spaces/stabilityai/stable-diffusion-3-mediumhttps://huggingface.co/spaces/stabilityai/stable-diffusion-3-medium官方space&#xff0c;童叟无欺&#xff0c;科学试用。 an image of a girl with white hair, in the style of ross tran, light …

datastage在升级版本到11.7之后,部分在11.3上正常执行的SP报错SQLSTATE = 22007: 本机错误代码 = -180

在升级版本到11.7之后&#xff0c;部分在11.3上正常执行的SP开始报错&#xff0c;报的SQL错误是时间参数问题&#xff0c;但是一样的SP可以直接call sp执行&#xff0c;也可以手动调用作业执行&#xff0c;只有设置定时调度时作业会报错&#xff0c; CALLXXX.XXX(1,CURRENT TIM…

xcode-select: error: tool ‘xcodebuild‘ requires Xcode, but active developer

打开 .sh 文件所在的终端窗口&#xff0c;执行终端命令&#xff1a;sh 文件名.sh&#xff0c;出现如下错误&#xff1a; 解决办法&#xff1a;

如何修改npm包

前言 开发中遇到一个问题&#xff0c;配置 Element Plus 自定义主题时&#xff0c;添加了 ElementPlusResolver({ importStyle: "sass" }) 后&#xff0c;控制台出现报错&#xff0c;这是因为 Dart Sass 2.0 不再支持使用 !global 来声明新变量&#xff0c;虽然当前…

RabbitMQ队列详细属性(重要)

RabbitMQ队列详细属性 1、队列的属性介绍1.1、Type&#xff1a;队列类型1.2、Name&#xff1a;队列名称1.3、Durability&#xff1a;声明队列是否持久化1.4、Auto delete&#xff1a; 是否自动删除1.5、Exclusive&#xff1a;1.6、Arguments&#xff1a;队列的其他属性&#xf…

通过Python 调整Excel行高、列宽

在Excel中&#xff0c;默认的行高和列宽可能不足以完全显示某些单元格中的内容&#xff0c;特别是当内容较长时。通过调整行高和列宽&#xff0c;可以确保所有数据都能完整显示&#xff0c;避免内容被截断。合理的行高和列宽可以使表格看起来更加整洁和专业&#xff0c;尤其是在…

Qt学习笔记(四)多线程

系列文章目录 Qt开发笔记&#xff08;一&#xff09;Qt的基础知识及环境编译&#xff08;泰山派&#xff09; Qt学习笔记&#xff08;二&#xff09;Qt 信号与槽 Qt学习笔记&#xff08;三&#xff09;网络编程 Qt学习笔记&#xff08;四&#xff09;多线程 文章目录 系列文章…

用 Python 从零开始创建神经网络(三):添加层级(Adding Layers)

添加层级&#xff08;Adding Layers&#xff09; 引言1. Training Data2. Dense Layer Class 引言 我们构建的神经网络变得越来越受人尊敬&#xff0c;但目前我们只有一层。当神经网络具有两层或更多隐藏层时&#xff0c;它们变成了“深度”网络。目前我们只有一层&#xff0c…

如何在jupyter notebook切换python环境

目录 参考链接 首先确保conda已经正常安装 conda --version 或者conda -V 以下请将“myenv”替换成自己的命名&#xff01;&#xff01;&#xff01; 1-查看虚拟环境目录 conda env list 2-创建虚拟环境命令 conda create -n myenv 或者 conda create --name myenv 3-激活虚拟环…

C#从入门到放弃

C#和.NET的区别 C# C#是一个编程语言 .NET .NET是一个在window下创建程序的框架 .NET框架不仅局限于C#,它还可以支持很多语言 .NET包括了2个组件&#xff0c;一个叫CLR(通用语言运行时)&#xff0c;另一个是用来构建程序的类库 CLR 用C写一个程序&#xff0c;在一台8688的机器…

STM32 低功耗模式详解

目录 一、什么是低功耗 二、低功耗的核心思想 三、STM32的3种低功耗模式 1、睡眠模式 (Sleep Mode) 2、停止模式 (Stop Mode) 3、 待机模式 (Standby Mode) 四、相关电源管理寄存器 1、PWR_CR (Power Control Register, 电源控制寄存器) 2、PWR_CSR (Power Control/St…

数位DP学习

数位 DP - OI Wiki 引入 主要变量及函数 变量&#xff1a; L, R: 所求区间边界 limit&#xff1a;边界限制&#xff0c;主要在记忆化搜索里用 len&#xff1a;所求数的位数 pos&#xff1a;当前所求位置 lead&#xff1a; 前导零 DP[N][M] &#xff1a;第一维是当前的pos&…

WP网站如何增加文章/页面的自定义模板

通过Wordpress我们后台在发布文章或者页面的时候其实可以看到有些主题 他有选择使用的页面模板&#xff0c;可以自定义模板&#xff0c;但是有些主题却没有选择主题这个功能&#xff0c;那这个自定义模板的功能是如何实现的呢&#xff1f;以下分两种情况&#xff1a;Page页面和…

Python学习从0到1 day27 Python 高阶技巧 ③ 设计模式 — 单例模式

此去经年&#xff0c;再难同游 —— 24.11.11 一、什么是设计模式 设计模式是一种编程套路&#xff0c;可以极大的方便程序的开发最常见、最经典的设计模式&#xff0c;就是我们所学习的面向对象了。 除了面向对象外,在编程中也有很多既定的套路可以方便开发,我们称之为设计模…

DAY112代码审计PHP开发框架POP链利用Yii反序列化POP利用链

一、pop1链的跟踪 1、路由关系 2、漏洞触发口unserialize(base64_decode($data)); 2、__destruct()&#xff0c;魔术法方法调用close函数方法 3、未找到利用链&#xff0c;尝试__call魔术方法 4、逆推找call_user_func 函数 第一部分 namespace yii\db; class BatchQueryResu…

Flink新版Source接口源码解析

目录 1. 前言 2. Source解析 2.1 Source类图 2.2 接口和方法说明 2.2.1 Source,> 3. SplitEnumerator解析 3.1 SplitEnumetator类图 3.2 类和方法说明 3.2.1 SplitEnumerator 3.2.2 SimpleVersionedSerializer 4. SourceReader解析 4.1 SourceReader类图 4.2 类…

SpringBoot后端解决跨域问题

1.全局方式 新建一个conifg配置类&#xff0c;内容如下&#xff1a; Configuration public class CorsConfig implements WebMvcConfigurer {Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**")//是否发送Cookie.allowCrede…

qt QUndoCommand 与 QUndoStack详解

1、概述 QUndoCommand 和 QUndoStack 是 Qt 框架中用于实现撤销/重做&#xff08;undo/redo&#xff09;功能的两个核心类。QUndoCommand 是表示单个可撤销操作的基类&#xff0c;而 QUndoStack 则负责管理这些命令的堆栈&#xff0c;提供撤销和重做操作的接口。 QUndoCommand…

Struts源码阅读——三个常用的辅助类DispatchAction

Struts源码阅读——三个常用的辅助类 紧接前文&#xff0c;我们来阅读org.apache.struts.actions包中三个常用类的源码。 DispatchAction、LookupDispatchAction 和 MappingDispatchAction 是 Struts 1 框架中的三个常用的辅助类&#xff0c;用来简化 Action 类中的请求分发。…