当前位置: 首页 > news >正文

前端处理 Excel 文件

引入XLSX 

   XLSX 是一个流行的 JavaScript 库,用于处理 Excel 文件(包括 .xls 和 .xlsx 格式)。它可以在 Node.js 环境和浏览器中运行,提供了丰富的 API 来读取、写入、修改 Excel 文件。当你使用 import * as XLSX from 'xlsx'; 这行代码时,你实际上是在从 xlsx 包中导入所有的导出内容,并将它们作为一个名为 XLSX 的对象来使用。这里有几个基本的 XLSX 库用法示例,展示如何使用这个库来读取和写入 Excel 文件:

读取 Excel 文件

假设你有一个名为 example.xlsx 的 Excel 文件,你想读取其中的数据。

const workbook = XLSX.readFile('example.xlsx'); // 读取 Excel 文件  
const firstSheetName = workbook.SheetNames[0]; // 获取第一个工作表的名称  
const worksheet = workbook.Sheets[firstSheetName]; // 通过名称获取第一个工作表  // 将工作表转换为 JSON 对象  
const json = XLSX.utils.sheet_to_json(worksheet, {header:1}); // {header:1} 表示第一行为表头  
console.log(json);

写入 Excel 文件

如果你想创建一个新的 Excel 文件或修改一个现有的文件并保存它,你可以这样做:

// 创建一个新的工作簿  
const workbook = XLSX.utils.book_new();  // 创建一个新的工作表  
const worksheet = XLSX.utils.json_to_sheet([{name: "Sheet JS", data: [1, 2, 3]}]);  // 将工作表添加到工作簿  
XLSX.utils.book_append_sheet(workbook, worksheet, "My Sheet");  // 写入文件  
XLSX.writeFile(workbook, 'new_example.xlsx');

注意,上面的示例中 json_to_sheet 函数的输入数据格式是为了展示如何创建一个包含特定数据的工作表,并不完全符合 Excel 表格的常见数据结构。通常,你会传入一个对象数组,每个对象代表一行,对象的键对应列名。

表格数据转为 Excel 文件并导出

npm install file-saver 
import { saveAs } from 'file-saver';
//引入导出api
 let data=[[1,2,3],[4,5,6]
]
// 将数据转换为工作表const worksheet = XLSX.utils.aoa_to_sheet(data);// 创建工作簿并添加工作表const workbook = XLSX.utils.book_new();XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');// 生成Excel文件const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });// 使用blob和FileReader创建一个URL然后下载const dataBlob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8' });saveAs(dataBlob, 'demp.xlsx');

注意事项

  • 当你在 Node.js 环境中使用 XLSX 库时,需要确保你已经通过 npm 或 yarn 安装了它(npm install xlsx 或 yarn add xlsx)。
  • 在浏览器中使用时,你可能需要通过 <script> 标签或类似的方式引入库文件。
  • XLSX 库支持多种格式的 Excel 文件(包括 .xls),但处理 .xls 文件时可能需要额外的库(如 SheetJS/xlsx 的一部分功能)或依赖。
  • 使用 XLSX 库时,请确保遵循其 API 文档,以充分利用其功能。

相关文章:

前端处理 Excel 文件

引入XLSX XLSX 是一个流行的 JavaScript 库&#xff0c;用于处理 Excel 文件&#xff08;包括 .xls 和 .xlsx 格式&#xff09;。它可以在 Node.js 环境和浏览器中运行&#xff0c;提供了丰富的 API 来读取、写入、修改 Excel 文件。当你使用 import * as XLSX from xlsx; 这行…...

(vue)el-cascader级联选择器按勾选的顺序传值,摆脱层级约束

(vue)el-cascader级联选择器按勾选的顺序传值,摆脱层级约束 需求&#xff1a;按勾选的顺序给后端传值 难点&#xff1a;在 Element UI 的 el-cascader 组件中&#xff0c;默认的行为是根据数据的层级结构来显示选项&#xff0c;用户的选择也会基于这种层级结构&#xff0c;el-…...

Redis进阶(四):哨兵

为了解决主节点故障&#xff0c;需要人工操作切换主从的情况&#xff1b;因此需要一种方法可以自动化的切换&#xff1a;哨兵的引入大大改变这种情况。 哨兵的基本概念 自动切换主从节点 哨兵架构 1、当一个哨兵节点发现主节点挂了的时候&#xff0c;还需要其他节点也去检测一…...

蓝屏事件:网络安全的启示

“微软蓝屏”事件暴露了网络安全哪些问题&#xff1f; 近日&#xff0c;一次由微软视窗系统软件更新引发的全球性“微软蓝屏”事件&#xff0c;不仅成为科技领域的热点新闻&#xff0c;更是一次对全球IT基础设施韧性与安全性的深刻检验。这次事件&#xff0c;源于美国电脑安全技…...

技术方案评审原则

系列文章目录 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 TODO:写完再整理 文章目录 系列文章目录前言技术方案评审原则1.理论突破阶段2.技术突破阶段3.工程化阶段自动驾驶行业的技术方案分析前言 认知有限,望大家多多包涵,有什么问题也希望能够与大…...

117页PPT埃森哲-物流行业信息化整体规划方案

一、埃森哲-物流行业信息化整体规划方案 资料下载方式&#xff0c;请看每张图片右下角信息 埃森哲在物流行业信息化整体规划项目中的核心内容&#xff0c;旨在帮助物流企业通过信息技术的应用实现业务流程的优化、运营效率的提升以及市场竞争力的增强。以下是埃森哲在此类项目…...

百度网盘不下载怎么直接打印文件?

在数字化时代&#xff0c;百度网盘作为我们存储和分享文件的重要工具&#xff0c;承载了大量的文档、图片和资料。然而&#xff0c;当需要打印这些文件时&#xff0c;很多用户会面临一个共同的问题&#xff1a;不想下载到本地再打印&#xff0c;既占用空间又浪费时间。那么&…...

设置了 robots.txt 禁止爬虫抓取,为什么还是能被百度搜索出来

虽然设置了 robots.txt 禁止爬虫抓取&#xff0c;但网页仍可能被百度搜索出来&#xff0c;主要有以下几个原因&#xff1a; robots.txt 只是一种建议性协议&#xff0c;并非强制性[2]。虽然大多数搜索引擎会遵守 robots.txt 的规则&#xff0c;但并不是所有爬虫都会严格遵守。 …...

DedeCMS-V5.7.82-UTF8织梦管理系统漏洞

将靶场环境放到www目录下——访问/dedecms/uploads 安装程序 - 织梦内容管理系统 V5.7 UTF8SP2 同意协议——继续 继续 配置后——点击继续 进入后台 登录后台——填写用户名密码。 方法一&#xff1a;上传shell文件 后台——核心——附件管理——上传新文件。 访问/dedecms…...

【Python】字符串练习题及代码示例

1、使用while循环实现对字符串中每个字符进行输出。 代码示例&#xff1a; 2、请将代码实现如下进制的转换。 &#xff08;1&#xff09;v1675,请将v1转换为二进制。 代码&#xff1a; 注意&#xff1a;将十进制数转换为二进制数的方法是&#xff1a;bin(a),a是整型&#x…...

fluent动网格profile udf 注意事项

案例一&#xff1a; ((profile_name transient 2 0) ....第一行 (time 0 15.0) ....第二行 (v_x 1.2 1.2)) …...

【doghead】mac构建 2: player 端 clion构建

准备工作 【doghead】mac构建 1 【doghead】mac: clion2024.1启动崩溃 mbp的 uv 构建ok zhangbin@zhangbin-mbp-2  ~/tet/Fargo/zhb-bifrost/Bifrost-202403/worker/third_party/libuv   main clion使用lldb cmake构建 更...

论网络流(最大流篇)--新手入门超详解--包教包会

论网络流--新手入门超详解--包教包会 1 前言2 什么是最大流3最大流问题的求解&#xff08;1&#xff09;问题转化--增广路的引入&#xff08;2&#xff09;走回头路--EK算法&#xff08;3&#xff09;EK的弊端&#xff08;4&#xff09;化图为树--DINIC算法 4后记 1 前言 网络…...

环境搭建:全面详尽的 MongoDB Shell MongoDB Server介绍、安装、验证与配置指南(以 Windows 系统为主)

环境搭建&#xff1a;全面详尽的 MongoDB Shell & MongoDB Server介绍、安装、验证与配置指南&#xff08;以 Windows 系统为主&#xff09; MongoDB 是一个基于文档的 NoSQL 数据库&#xff0c;以其高性能、灵活性和可扩展性而受到广泛欢迎。本文将带您完成 MongoDB 的安装…...

使用 OpenSearch 的 K-NN 向量搜索来增强搜索功能

使用 OpenSearch 的 K-NN 向量搜索来增强搜索功能 许多应用程序都依赖于提供精确且相关的搜索结果的能力。尽管传统关系数据库的全文搜索功能在某些情况下已经足够&#xff0c;但这些数据库在从文本中提取语义含义或搜索结构化程度较低的数据方面可能会出现不足。在这篇博文中&…...

Less-2(闭合)

我们使用第一关的测试方法尝试一下,打咩 直接看源码&#xff0c;看到&#xff0c;尝试一下闭合 <?php ini_set("display_errors", 0); $str $_GET["keyword"]; echo "<h2 aligncenter>没有找到和".htmlspecialchars($str)."相…...

mysql介绍

MySQL是一种开源的关系型数据库管理系统&#xff08;RDBMS&#xff09;&#xff0c;广泛用于存储和管理数据。它支持多种操作系统&#xff0c;如Linux、Windows、MacOS等。MySQL的特点包括&#xff1a; 1.开源免费&#xff1a;MySQL是开源的&#xff0c;可以免费使用和分发。 2…...

【ROS学习】ROS中 use_sim_time 参数的含义与作用

文章目录 写在前面一、背景描述二、 use_sim_time 参数的含义与作用三、举例说明1. 不设置use_sim_time (也即 use_sim_time false)&#xff0c;播放数据集使用rosbag play **.bag 2. 不设置use_sim_time (也即 use_sim_time false)&#xff0c;播放数据集使用rosbag play **…...

python-查找元素3(赛氪OJ)

[题目描述] 有n个不同的数&#xff0c;从小到大排成一列。现在告诉你其中的一个数x&#xff0c;x不一定是原先数列中的数。你需要输出最后一个<x的数在此数组中的下标。输入&#xff1a; 输入共两行第一行为两个整数n、x。第二行为n个整数&#xff0c;代表a[i]。输出&#x…...

苹果 Safari 的隐私保护与广告追踪问题 :技术进展与挑战

隐私保护的进展与挑战 近年来&#xff0c;浏览器行业在隐私保护技术方面取得了显著进展&#xff0c;尤其是在广告追踪领域。谷歌的 Chrome 浏览器推广了隐私沙盒&#xff0c;通过将用户可能感兴趣的主题分类并推送给广告商。Mozilla Firefox 和 Meta Facebook 则推出了一种名为…...

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

Java面试专项一-准备篇

一、企业简历筛选规则 一般企业的简历筛选流程&#xff1a;首先由HR先筛选一部分简历后&#xff0c;在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如&#xff1a;Boss直聘&#xff08;招聘方平台&#xff09; 直接按照条件进行筛选 例如&#xff1a…...

是否存在路径(FIFOBB算法)

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

使用Spring AI和MCP协议构建图片搜索服务

目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式&#xff08;本地调用&#xff09; SSE模式&#xff08;远程调用&#xff09; 4. 注册工具提…...

JavaScript 数据类型详解

JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型&#xff08;Primitive&#xff09; 和 对象类型&#xff08;Object&#xff09; 两大类&#xff0c;共 8 种&#xff08;ES11&#xff09;&#xff1a; 一、原始类型&#xff08;7种&#xff09; 1. undefined 定…...

搭建DNS域名解析服务器(正向解析资源文件)

正向解析资源文件 1&#xff09;准备工作 服务端及客户端都关闭安全软件 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 2&#xff09;服务端安装软件&#xff1a;bind 1.配置yum源 [rootlocalhost ~]# cat /etc/yum.repos.d/base.repo [Base…...

LOOI机器人的技术实现解析:从手势识别到边缘检测

LOOI机器人作为一款创新的AI硬件产品&#xff0c;通过将智能手机转变为具有情感交互能力的桌面机器人&#xff0c;展示了前沿AI技术与传统硬件设计的完美结合。作为AI与玩具领域的专家&#xff0c;我将全面解析LOOI的技术实现架构&#xff0c;特别是其手势识别、物体识别和环境…...