前端表格解析方法

news2024/11/10 14:58:19

工具类文件

// fileUtils.ts

import { 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.coloradmin.cn/o/1937445.html

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

相关文章

【Git远程操作】忽略特殊文件 | 配置命令别名

目录 忽略特殊文件 配置命令别名 忽略特殊文件 前面我们讲到git提供了一个特殊的配置文件.gitignore模板 在⽇常开发中&#xff0c;我们有些⽂件不想或者不应该提交到远端&#xff0c;⽐如保存了数据库密码的配置⽂件&#xff0c;那怎么让 Git 知道呢&#xff1f;在 Git ⼯作…

python-网络并发模型

3. 网络并发模型 3.1 网络并发模型概述 什么是网络并发 在实际工作中&#xff0c;一个服务端程序往往要应对多个客户端同时发起访问的情况。如果让服务端程序能够更好的同时满足更多客户端网络请求的情形&#xff0c;这就是并发网络模型。 循环网络模型问题 循环网络模型只能…

【应急响应】Windows应急响应手册(勒索病毒篇)

文章目录 前言一、勒索病毒简述保护现场确定勒索病毒家族根据勒索病毒类型寻找解决方法寻找加密器解决勒索善后阶段常规安全检查阶段 前言 本篇内容围绕勒索病毒事件进行分析&#xff0c;通过使用技术手段来确定勒索病毒家族并寻找解密方法&#xff0c;实战中过程中可参考文中…

【JavaScript 算法】堆排序:优先队列的实现

&#x1f525; 个人主页&#xff1a;空白诗 文章目录 一、算法原理堆的定义堆排序的步骤 二、算法实现构建最大堆注释说明&#xff1a; 三、应用场景四、总结 堆排序&#xff08;Heap Sort&#xff09;是一种基于堆数据结构的排序算法&#xff0c;具有较好的时间复杂度表现。堆…

uniapp中给data中的变量赋值报错

排查了一上午&#xff0c;原本以为是赋值的这个变量有一个键名是空字符串的问题&#xff0c;后来发现是因为在data中定义变量是写的是{}&#xff0c;如果写成null就不会报错了&#xff0c;具体原因不清楚为什么

jmeter部署

一、windows环境下部署 1、安装jdk并配置jdk的环境变量 (1) 安装jdk jdk下载完成后双击安装包&#xff1a;无限点击"下一步"直到完成&#xff0c;默认路径即可。 (2) jdk安装完成后配置jdk的环境变量 找到环境变量中的系统变量&#xff1a;此电脑 --> 右键属性 …

java Selenium,定位 伪元素.UI自动化

Java中&#xff0c;要获取这个表单字段前面的必填标识星号“*”&#xff0c;因为是用的伪元素&#xff0c;无法直接通过常规定位获取字符&#xff0c;需要用到 JavascriptExecutor。 import org.openqa.selenium.By; import org.openqa.selenium.JavascriptExecutor; import or…

K8S实战进阶

title ‘K8S实战进阶’ date 2024-04-02T16:57:3608:00 draft true 一、搭建Kubernetes集群 1.1 搭建方案 1.1.1 minikube minikube 是一个工具&#xff0c; 能让你在本地运行 Kubernetes。 minikube 在你的个人计算机&#xff08;包括 Windows、macOS 和 Linux PC&…

【座舱域控器】座舱域的通信方案

座舱域的通信方案 座舱域控器作为整车的几大域控器之一&#xff0c;提供驾驶娱乐的功能。比如中控、副驾、仪表、HUD等。 就座舱来说&#xff0c;座舱域控制器以及MCU&#xff0c;加上一系列的硬件外设。以及再此硬件之上的软件系统&#xff0c;构成了整个座舱系统。 同时&…

【JavaScript 算法】双指针法:高效处理数组问题

&#x1f525; 个人主页&#xff1a;空白诗 文章目录 一、算法原理二、算法实现示例问题1&#xff1a;两数之和 II - 输入有序数组示例问题2&#xff1a;反转字符串中的元音字母注释说明&#xff1a; 三、应用场景四、总结 双指针法&#xff08;Two Pointer Technique&#xff…

全面了解不同GPU算力型号的价格!

这两年人工智能&#xff08;AI&#xff09;、机器学习&#xff08;ML&#xff09;、深度学习和高性能计算&#xff08;HPC&#xff09;领域的快速发展&#xff0c;GPU算力已成为不可或缺的资源。企业、研究机构乃至个人开发者越来越依赖于GPU加速计算来处理大规模数据集和复杂模…

数据实时获取方案之Flink CDC

目录 一、方案描述二、Flink CDC1.1 什么是CDC1.2 什么是Flink CDC1.3 其它CDC1.4 FlinkCDC所支持的数据库情况 二、使用Pipeline连接器实时获取数据2.1 环境介绍2.2 相关版本信息2.3 详细步骤2.3.1 实时获取MySQL数据并发送到Kafka2.3.2 实时获取MySQL数据并同步到Doris数据库…

240718_使用Labelme制作自己的图像分割数据集

240718_使用Labelme制作自己的图像分割数据集 从目标检测入门的朋友们可能更熟悉的是LabelImg&#xff0c;这里要注意做好区分&#xff0c;LabelImg和Labelme不是一个东西&#xff0c;如下经典图&#xff1a; &#xff08;a&#xff09;图像分类&#xff08;目标检测&#xff…

机器学习·概率论基础

概率基础 这部分太简单&#xff0c;直接略过 条件概率 独立性 独立事件A和B的交集如下 非独立事件 非独立事件A和B的交集如下 贝叶斯定理 先验 事件 后验 在概率论和统计学中&#xff0c;先验概率和后验概率是贝叶斯统计的核心概念 简单来说后验概率就是结合了先验概率的前提…

院内影像一体化平台PACS源码,C#语言的PACS/RIS系统,二级医院应用案例

全院级PACS系统源码&#xff0c;一体化应用系统整合&#xff0c;满足放射、超声、内窥镜中心、病理、检验等多个科室的工作流程和需求&#xff0c;为不同科室提供专业的解决方案&#xff0c;实现了全院乃至区域内信息互联互通、数据统一存储与管理等功能&#xff0c;做到以病人…

微软研发致胜策略 05:进度狂

这是一本老书&#xff0c;作者 Steve Maguire 在微软工作期间写了这本书&#xff0c;英文版于 1994 年发布。我们看到的标题是中译版名字&#xff0c;英文版的名字是《Debugging the Development Process》&#xff0c;这本书详细阐述了软件开发过程中的常见问题及其解决方案&a…

免费视频批量横转竖

简介 视频处理器 v1.3 是一款由是貔貅呀开发的视频编辑和处理工具&#xff0c;提供高效便捷的视频批量横转竖&#xff0c;主要功能&#xff1a; 导入与删除文件&#xff1a;轻松导入多个视频文件&#xff0c;删除不必要的文件。暂停与继续处理&#xff1a;随时暂停和继续处理。…

大数据-39 Redis 高并发分布式缓存 Ubuntu源码编译安装 云服务器 启动并测试 redis-server redis-cli

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; HadoopHDFSMapReduceHiveFlumeSqoopZookeeperHBaseRedis &#xff08;正在更新&#xff09; 章节内容 上一…

python中的数据类型-适合新手-比较完善(写了好久……)

作者的话 首先&#xff0c;我先申明&#xff0c;以下思路仅为个人理解&#xff0c;如有不同&#xff0c;望指导&#xff0c;谢谢。 数据类型它是什么&#xff0c;有什么用&#xff0c;怎么用就是它的全部内容&#xff0c;知识框架串联起来之后就是这三部分内容&#xff0c;没有…

【网络安全科普】勒索病毒 防护指南

勒索病毒简介 勒索病毒是一种恶意软件&#xff0c;也称为勒索软件&#xff08;Ransomware&#xff09;&#xff0c;其主要目的是在感染计算机后加密用户文件&#xff0c;并要求用户支付赎金以获取解密密钥。这种类型的恶意软件通常通过电子邮件附件、恶意链接、下载的软件或漏洞…