前端表格解析方法

工具类文件

// fileUtils.tsimport { ref } from 'vue';
import * as xlsx from 'xlsx';interface RowData {[key: string]: any;
}export const tableData = ref<RowData[]>([]);export async function handleFileSelect(url: string): Promise<void> {try {const response = await fetch(url);const blob = await response.blob();const reader = new FileReader();reader.onload = (e: ProgressEvent<FileReader>) => {if (e.target && e.target.result) {const data = new Uint8Array(e.target.result as ArrayBuffer);const workbook = xlsx.read(data, { type: 'array' });const worksheet = workbook.Sheets[workbook.SheetNames[0]];const jsonData = xlsx.utils.sheet_to_json(worksheet, { header: 1 }) as any[][];// 提取标题并保持其顺序const headers = jsonData[0];console.log('Extracted Headers:', headers);// 处理行(从索引1开始跳过标题)jsonData.slice(1).forEach((row) => {const rowData: RowData = {};headers.forEach((header, index) => {rowData[header] = row[index];});tableData.value.push(rowData);});console.log('Processed Table Data:', tableData.value);}};reader.readAsArrayBuffer(blob);} catch (error) {console.error('获取或读取文件时出错:', error);}
}

调用方法

const url ='https://xxxxx.xlsx';await handleFileSelect(url);

在这里插入图片描述

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

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

相关文章

《无线互联科技》是什么级别的期刊?是正规期刊吗?能评职称吗?

​问题解答 问&#xff1a;《无线互联科技》是不是核心期刊&#xff1f; 答&#xff1a;不是&#xff0c;是知网收录的正规学术期刊。 问&#xff1a;《无线互联科技》级别&#xff1f; 答&#xff1a;国家级。主管单位&#xff1a;江苏省科学技术厅 主办单位&#xff1a…

浅谈断言之MD5Hex断言

浅谈断言之MD5Hex断言 “MD5Hex断言”是一种特殊类型的断言&#xff0c;主要用于验证返回数据的完整性和一致性。本文将详细介绍MD5Hex断言的用途、配置方法及应用场景。 MD5Hex断言概述 MD5Hex断言基于MD5&#xff08;Message-Digest Algorithm 5&#xff09;算法&#xff…

Nexus3 批量上传 jar 包、pom文件

Nexus3 Maven 私服搭建及各种使用 详见**Maven私服搭建及各种使用汇总2020** Maven 配置 Nexus 私服 在 Maven 项目中配置 Nexus 私服&#xff0c;需要在项目的 pom.xml 或 maven 的 settings.xml 文件中添加 Nexus 仓库的配置。 示例&#xff1a; 以下是一个项目的 pom.xml…

JDK8升级到JDK17,报错Error:java:错误:不支持的发行版本5

1 问题描述&#xff1a; 我原来用到是JDK8,后来重新安装了JDK17后&#xff0c;并更换了JAVA_HOME的配置&#xff0c;在CDM上面查看JAVA版本确认安装无误。 当我打开IDEA运行代码时&#xff0c;就报错java&#xff1a;错误&#xff1a;不支持的发行版本5&#xff0c;至始至终我都…

UM980的天线馈电设计

UM980 不支持内部天线馈电&#xff0c;需要从模块外部给天线馈电&#xff0c;建议尽量选择高耐压、大功率的器件&#xff1b; 还可以在馈电电路上增加气体放电管、压敏电阻、 TVS 管等大功率的防护器件&#xff0c;可有效提高防雷击与防浪涌的能力。 如果 ANT_BIAS 天线馈电和模…

python3.10.4——CentOS7安装步骤

目录 1.CentOS7中默认有python2.7.5 2.安装前置依赖程序 3.在python官网下载linux系统安装包 4.解析、编译安装python3.10.4 5.创建软链接 6.修改yum相关配置 7.重新检查python版本号 1.CentOS7中默认有python2.7.5 2.安装前置依赖程序 yum install wget zlib-devel bz…

NVIDIA Container Toolkit 安装与配置帮助文档(Ubuntu,Docker)

NVIDIA Container Toolkit 安装与配置帮助文档(Ubuntu,Docker) 本文档详细介绍了在 Ubuntu Server 22.04 上使用 Docker 安装和配置 NVIDIA Container Toolkit 的过程。 概述 NVIDIA 容器工具包使用户能够构建和运行 GPU 加速容器。即可以在容器中使用NVIDIA显卡。 架构图如…

Qt开发网络嗅探器03

数据包分析 想要知道如何解析IP数据包&#xff0c;就要知道不同的IP数据包的包头结构&#xff0c;于是我们上⽹查查资料&#xff1a; 以太网数据包 ARP数据包 IPv4 IPv6 TCP UDP ICMP ICMPv6 根据以上数据包头结构&#xff0c;我们就有了我们的protocol.h文件&#xff0c;声明…

【云原生】Kubernetes中的DaemonSet介绍、原理、用法及实战应用案例分析

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…

【LeetCode】填充每个节点的下一个右侧节点指针 II

目录 一、题目二、解法完整代码 一、题目 给定一个二叉树&#xff1a; struct Node { int val; Node *left; Node *right; Node *next; } 填充它的每个 next 指针&#xff0c;让这个指针指向其下一个右侧节点。如果找不到下一个右侧节点&#xff0c;则将 next 指针设置为 NUL…

【学习笔记】无人机系统(UAS)的连接、识别和跟踪(十)-无人机A2X服务

引言 3GPP TS 23.256 技术规范&#xff0c;主要定义了3GPP系统对无人机&#xff08;UAV&#xff09;的连接性、身份识别、跟踪及A2X&#xff08;Aircraft-to-Everything&#xff09;服务的支持。 3GPP TS 23.256 技术规范&#xff1a; 【免费】3GPPTS23.256技术报告-无人机系…

Mindspore框架循环神经网络RNN模型实现情感分类|(二)RNN模型构建

Mindspore框架循环神经网络RNN模型实现情感分类 Mindspore框架循环神经网络RNN模型实现情感分类|&#xff08;一&#xff09;IMDB影评数据集准备 Mindspore框架循环神经网络RNN模型实现情感分类|&#xff08;二&#xff09;RNN模型构建 Mindspore框架循环神经网络RNN模型实现情…

实测!高性能PCIe 5.0 SSD为AI训练贡献了啥?

如今&#xff0c;AI 的火热程度已经不需要解释。算力、算法、数据&#xff0c;构成驱动 AI 技术快速发展的三驾马车&#xff1a; 算力越强&#xff0c;越能够处理更加复杂的训练模型&#xff0c;并加速训练进程&#xff1b;算法越先进&#xff0c;越能高效的从数据中学习并优化…

element-plus的el-table自定义表头筛选查询

文章目录 一、效果二、代码1.代码可直接复制使用 三、问题1.使用el-popover完成筛选框 一、效果 二、代码 1.代码可直接复制使用 <template><div class"page-view" click"handleClickOutside"><el-button click"resetFilters"&…

云服务器2核2G配置可以干嘛?2C2G用来做什么合适?

最便宜的服务器2核2G配置可以做什么&#xff1f;可用来搭建Web网站服务器、小程序服务器、APP后端服务器、图床、开发测试环境、小型电子商务网站及文件存储等使用场景。服务器百科网fwqbk.com举例说明&#xff1a; 搭建个人博客&#xff1a;使用开源WordPress等博客程序系统&…

git使用、git与idea结合、gitee、gitlab

本文章基于黑马程序javase模块中的"git"部分 先言:git在集成idea中,不同版本的idea中页面显示不同,操作时更注重基于选项的文字;git基于命令操作参考文档实现即可,idea工具继承使用重点掌握 1.git概述 git是目前世界上最先进的分布式文件版本控制系统 分布式:将…

照片怎么改大小kb?分享5个改小图片的工具

夏日炎炎&#xff0c;正是出游拍照的大好时节&#xff0c;然而随之而来的问题也让人头疼——手机里的美照越来越多&#xff0c;存储空间却越来越紧张。 不仅如此&#xff0c;上传至社交媒体时&#xff0c;大尺寸的照片常常让加载速度慢如蜗牛&#xff0c;影响了分享的乐趣。 …

[Spring Boot]Protobuf解析MQTT消息体

简述 本文主要针对在MQTT场景下&#xff0c;使用Protobuf协议解析MQTT的消息体 Protobuf下载 官方下载 https://github.com/protocolbuffers/protobuf/releases网盘下载 链接&#xff1a;https://pan.baidu.com/s/1Uz7CZuOSwa8VCDl-6r2xzw?pwdanan 提取码&#xff1a;an…

【毕业论文】| 基于Unity3D引擎的冒险游戏的设计与实现

&#x1f4e2;博客主页&#xff1a;肩匣与橘 &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01; &#x1f4e2;本文由肩匣与橘编写&#xff0c;首发于CSDN&#x1f649; &#x1f4e2;生活依旧是美好而又温柔的&#xff0c;你也…

mysql + Oracle

eg627. 变更性别 Salary 表&#xff1a; ----------------------- | Column Name | Type | ----------------------- | id | int | | name | varchar | | sex | ENUM | | salary | int | ----------------------- id 是这个表…