前端表格解析方法

工具类文件

// 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,一经查实,立即删除!

相关文章

后台接口的配置

第一步是在src目录下创建一个文件夹叫utils然后在utils文件夹创建一个文件叫auth.js import Cookies from js-cookie const TokenKey Admin-Token export function getToken() { return Cookies.get(TokenKey) return eyJhbGciOiJIUzUxMiIsInR5cCI6IkpXVCJ9.eyJ1c2UiOiJl…

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

​问题解答 问&#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;至始至终我都…

魁北克:IT行业的新天地

在全球化的浪潮中&#xff0c;IT行业已成为全球经济发展的重要驱动力。加拿大魁北克省以其独特的文化、优质的教育资源和富有竞争力的工作环境&#xff0c;逐渐成为IT专业人士的新选择。 1. 魁北克的地理与文化优势 魁北克省位于加拿大东部&#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;声明…

el-upload 上传图片转成base64 字符串,传给后端,且base64在页面的展示

1.dragUpdate 文件上传组件 ​ <template><el-uploadref="uploadRef"action="#"v-bind="$attrs"drag:accept="accept":auto-upload="false":show-file-list=isNotLogo:on-change="handleUploadChange":…

MyBatis 返回行数的技术指南:避免常见陷阱

前言 在使用 MyBatis 进行数据库操作时&#xff0c;很多开发者会依赖返回的行数来判断操作是否成功。然而&#xff0c;默认配置下&#xff0c;MySQL 数据库返回的行数可能会导致一些误判。这篇文章将详细探讨 MyBatis 返回行数的原理、常见问题及如何通过配置来避免这些陷阱&a…

Linux grep技巧 提取log中的json数据

目录 一. 前提1.1 数据准备1.2 需求1.3 分析 二. 数据提取2.1 提取所有的json数据2.2 提取子项目的全部json数据2.3 提取指定项目的json数据 一. 前提 1.1 数据准备 545-1 2024/07/20 18:20:21 [ERROR] MPX001 eventControlleraupay transactionIdA545 {"event":&q…

【云原生】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模型实现情…

java代码判断windows还是linux系统

public String getFilePath() {String osName System.getProperty("os.name").toLowerCase();log.info("此系统名称为:{}", osName);// 判断操作系统if (osName.contains("windows")) {return "windows";} else {//linux地址return &…

『大模型笔记』LLM秘密:温度、Top-K和Top-P抽样技术解析!

『大模型笔记』LLM秘密:温度、Top-K和Top-P抽样技术解析! 文章目录 一. LLM秘密:温度、Top-K和Top-P随机采样技术解析!1. 温度(Temperature)参数2. Top-K采样3. Top-P采样4. 总结补充:TopK采样解释:步骤1: 确定Top-K词步骤2: 归一化选择的Top-K词的概率步骤3: 从重新归…

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

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