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

news2024/11/15 22:34:07

前言

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 文件,从而提升数据处理和分析的效率。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

利用飞书多维表格自动发布版本

文章目录 背景尝试1&#xff0c;轮询尝试2&#xff0c;长连接 背景 博主所在的部门比较奇特&#xff0c;每个车型每周都需要发版&#xff0c;所以实际上一周会发布好几个版本。经过之前使用流水线自动发版改造之后&#xff0c;发版的成本已经大大降低了&#xff0c;具体参考&a…

Qwen2-VL:发票数据提取、视频聊天和使用 PDF 的多模态 RAG 的实践指南

概述 随着人工智能技术的迅猛发展&#xff0c;多模态模型在各类应用场景中展现出强大的潜力和广泛的适用性。Qwen2-VL 作为最新一代的多模态大模型&#xff0c;融合了视觉与语言处理能力&#xff0c;旨在提升复杂任务的执行效率和准确性。本指南聚焦于 Qwen2-VL 在三个关键领域…

蓝桥杯每日真题 - 第7天

题目&#xff1a;&#xff08;爬山&#xff09; 题目描述&#xff08;X届 C&C B组X题&#xff09; 解题思路&#xff1a; 前缀和构造&#xff1a;为了高效地计算子数组的和&#xff0c;我们可以先构造前缀和数组 a&#xff0c;其中 a[i] 表示从第 1 个元素到第 i 个元素的…

家政服务小程序,家政行业数字化发展下的优势

今年以来&#xff0c;家政市场需求持续增长&#xff0c;市场规模达到了万亿级别&#xff0c;家政服务行业成为了热门行业之一&#xff01; 家政服务种类目前逐渐呈现了多样化&#xff0c;月嫂、保姆、做饭保洁、收纳、维修等家政种类不断出现&#xff0c;满足了居民日益增长的…

蓝桥杯每日真题 - 第12天

题目&#xff1a;&#xff08;数三角&#xff09; 题目描述&#xff08;14届 C&C B组E题&#xff09; 解题思路&#xff1a; 给定 n 个点的坐标&#xff0c;计算其中可以组成 等腰三角形 的三点组合数量。 核心条件&#xff1a;等腰三角形的定义是三角形的三条边中至少有…

Linux系统下svn新建目录

Linux安装svn自行查找 新建目录 新建一个自定义库的文件夹&#xff1a;mkdir security 使用svnadmin命令在新创建的目录中创建一个新的SVN版本库。例如&#xff1a; svnadmin create security 执行完成以上命令就会生成默认配置文件 通过pwd命令查找当前目录路径 路径&…

SpringCloud基础 入门级 学习SpringCloud 超详细(简单通俗易懂)

Spring Cloud 基础入门级学习 超详细&#xff08;简单通俗易懂&#xff09; 一、SpringCloud核心组件第一代&#xff1a;SpringCloud Netflix组件第二代&#xff1a;SpringCloud Alibaba组件SpringCloud原生组件 二、SpringCloud体系架构图三、理解分布式与集群分布式集群 四、…

性能调优专题(9)之从JDK源码级别解析JVM类加载机制

一、类加载运行全过程 当我们用java命令运行某个类的main函数启动程序时&#xff0c;首先需要通过类加载器把主类加载到JVM。 package com.tuling.jvm;public class Math {public static final int initData 666;public static User user new User();public int compute() {…

【全面系统性介绍】虚拟机VM中CentOS 7 安装和网络配置指南

一、CentOS 7下载源 华为源&#xff1a;https://mirrors.huaweicloud.com/centos/7/isos/x86_64/ 阿里云源&#xff1a;centos-vault-7.9.2009-isos-x86_64安装包下载_开源镜像站-阿里云 百度网盘源&#xff1a;https://pan.baidu.com/s/1MjFPWS2P2pIRMLA2ioDlVg?pwdfudi &…

「JVM详解」

JVM JVM概述 基本介绍 JVM&#xff1a;全称 Java Virtual Machine&#xff0c;即 Java 虚拟机&#xff0c;一种规范&#xff0c;本身是一个虚拟计算机&#xff0c;直接和操作系统进行交互&#xff0c;与硬件不直接交互&#xff0c;而操作系统可以帮我们完成和硬件进行交互的…

正点原子IMX6ULL--嵌入式Linux开发板学习中常用命令和笔记记录

学习路线图 传驱动文件 sudo cp chrdevbase.ko chrdevbaseApp /home/txj/linux/nfs/rootfs/lib/modules/4.1.15/ -f bootcmd setenv bootcmd tftp 80800000 zImage;tftp 83000000 imx6ull-alientek-emmc.dtb;bootz 80800000 - 83000000 setenv bootcmd tftp 80800000 zImag…

DVWA靶场通关——SQL Injection篇

一&#xff0c;Low难度下unionget字符串select注入 1&#xff0c;首先手工注入判断是否存在SQL注入漏洞&#xff0c;输入1 这是正常回显的结果&#xff0c;再键入1 You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for…

CSS回顾-基础知识详解

一、引言 在前端开发领域&#xff0c;CSS 曾是构建网页视觉效果的关键&#xff0c;与 HTML、JavaScript 一起打造精彩的网络世界。但随着组件库的大量涌现&#xff0c;我们亲手书写 CSS 样式的情况越来越少&#xff0c;CSS 基础知识也逐渐被我们遗忘。 现在&#xff0c;这种遗…

SSH和NFS

文章目录 SSH和NFS1 SSH远程管理1.1 概述1.2 ssh服务端和客户端1.3 用法1.3.1 服务器命令行的远程登录方式1.3.2 scp1.3.3 sftp1.3.4 ssh的密钥登录 2 NFS2.1 概述2.2 nfs操作步骤 SSH和NFS 1 SSH远程管理 1.1 概述 SSH&#xff08;Secure Shell&#xff09;协议是一种用于远…

Springboot 启动端口占用如何解决

Springboot 启动端口占用如何解决 1、报错信息如下 *************************** APPLICATION FAILED TO START ***************************Description:Web server failed to start. Port 9010 was already in use.Action:Identify and stop the process thats listening o…

SpringBoot 打造图片阅后即焚功能

阅后即焚”&#xff08;Snapchat-like feature&#xff09;是指一种社交媒体或信息传递功能&#xff0c;用户在阅读某条信息或查看某张图片后&#xff0c;该信息或图片会自动销毁&#xff0c;无法再次查看。这种功能的主要目的是保护用户的隐私和信息安全&#xff0c;防止敏感信…

FFmpeg 4.3 音视频-多路H265监控录放C++开发十三.2:avpacket中包含多个 NALU如何解析头部分析

前提&#xff1a; 注意的是&#xff1a;我们这里是从avframe转换成avpacket 后&#xff0c;从avpacket中查看NALU。 在实际开发中&#xff0c;我们有可能是从摄像头中拿到 RGB 或者 PCM&#xff0c;然后将pcm打包成avframe&#xff0c;然后将avframe转换成avpacket&#xff0…

Vue之插槽(slot)

插槽是vue中的一个非常强大且灵活的功能&#xff0c;在写组件时&#xff0c;可以为组件的使用者预留一些可以自定义内容的占位符。通过插槽&#xff0c;可以极大提高组件的客服用和灵活性。 插槽大体可以分为三类&#xff1a;默认插槽&#xff0c;具名插槽和作用域插槽。 下面…

华为鸿蒙HarmonyOS NEXT升级HiCar:打造未来出行新体验

随着科技的不断进步&#xff0c;智能出行已成为我们生活中不可或缺的一部分。华为凭借其在智能科技领域的深厚积累&#xff0c;推出了全新的鸿蒙HarmonyOS NEXT系统&#xff0c;旨在为用户打造一个“人车家”的无缝协同出行体验。这一系统的核心亮点之一&#xff0c;就是其内置…

Clickhouse集群新建用户、授权以及remote权限问题

新建用户 create user if not exists user on cluster 集群名称 IDENTIFIED WITH plaintext_password BY 密码;给用户授查询、建表、删表的权限 GRANT create table,select,drop table ON 数据库实例.* TO user on cluster 集群名称 ;在其他节点下用户建本地表成功&#…