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

前端将xlsx转成json

  1. 第一种方式,用js方式
    1.1先安装插件
    万事都离不开插件的支持首先要安装两个插件

1.2. 安装xlsx

cnpm install xlsx --save

注:这块我用的cnpm,原生的是npm,因为镜像的问题安装了cnpm,至于怎么装网上一搜一大堆

1.3安装js doc插件
安装js doc插件。在vscode的插件管理,搜索Add jsdoc comments,然后安装就可以
注:这个插件是给vscode写js代码时提示用的,新手建议装一下,老鸟的话你随便

1.4.写上传文件的按钮
我这块儿没用element plus,后边第二种方式会用
样式这块用的js

  <div><span><el-icon class="el-icon--upload"><upload-filled /></el-icon><input type="file" @change="handleChange"></span></div>

1.5.逻辑代码,每一行都有注释

import * as XLSX from "xlsx"const handleChange = (e) => {// 得到上传文件的信息let fileObj = e.target.files[0]// console.log(fileObj)// FileReader 对象是专门操作二进制数据的,主要用于将文件内容读入内存当中const fileReader = new FileReader()// 将文件内容读成二进制数据放到内存当中fileReader.readAsArrayBuffer(fileObj)// 读取文件的内容fileReader.onload = (event) =>{// 读进来之后是一个二进制文件const fileData = event.target.result;// 用XLSX以二进制的方式取出电子表格字节中的数据const workbook = XLSX.read(fileData,{type:"binary",})// 按选项卡顺序列出工作表名称,也就是工作簿的名称,const wsname = workbook.SheetNames[0];// console.log(wsname)// 从工作表创建JS值数组并解析成json数据const sheetJson = XLSX.utils.sheet_to_json(workbook.Sheets[wsname])console.log(sheetJson)}
}

1.6.别看广告看疗效,上图
在这里插入图片描述
2.第二种方式就是哪种第二种方式

相关文章:

前端将xlsx转成json

第一种方式&#xff0c;用js方式 1.1先安装插件 万事都离不开插件的支持首先要安装两个插件 1.2. 安装xlsx cnpm install xlsx --save注&#xff1a;这块我用的cnpm&#xff0c;原生的是npm&#xff0c;因为镜像的问题安装了cnpm&#xff0c;至于怎么装网上一搜一大堆 1.3安…...

使用LLaMA-Factory微调大模型

使用LLaMA-Factory微调大模型 github 地址 https://github.com/hiyouga/LLaMA-Factory 搭建环境 git clone --depth 1 https://github.com/hiyouga/LLaMA-Factory.git cd LLaMA-Factory在 LLaMA-Factory 路径下 创建虚拟环境 conda create -p ./venv python3.10激活环境 c…...

C语言二级指针、指针数组

一、二级指针 指针变量也是变量&#xff0c;是变量就应有地址&#xff0c;那指针变量的地址存放在哪里&#xff1f;存放在二级指针变量。 此时&#xff0c;*ppa pa&#xff0c;**ppa a。 二、指针数组 指针数组&#xff0c;顾名思义就是存放指针的数组。 数组每个元素为int类…...

python方法

目录 公共方法 1.容器类型之间的转化 ​2.运算符 ​3.通用函数 公共方法 1.容器类型之间的转化 # 类型转化 data_str itcast data_list [hadoop, spark, hive, python, hive] data_tupe (hadoop, spark, hive, python, hive) data_set {hadoop, spark, hive, python,…...

0基础学习区块链技术——去中心化

大纲 去验证的中心化验证者如何验证验证者为什么要去传播 去确认的中心化去存储的中心化 “去中心化”是区块链技术的核心。那么我们该如何理解这个概念呢&#xff1f; 我们可以假想在一次现实转账中&#xff0c;有哪些“中心化”的行为&#xff1a; 判断余额是否足够。即判断…...

索引的强大作用和是否创建的索引越多越好

在经常查询字段上创建索引。 在大数据的情况下&#xff0c;在索引上查找可以提交10倍以上甚至1000倍的速度。 实际测试&#xff0c;不在索引上查找用时12秒左右。建立索引&#xff0c;在索引上查找速度提高只耗时1.1秒左右。当然索引也是一把双刃剑&#xff0c;在一个表上创建索…...

批量GBK转UTF-8

大家都有这样的需求&#xff0c;把GBK编码的源代码转换成utf-8编码的源代码。 毕竟现在UTF-8的支持是很好的。 以前一些旧代码是GBK的&#xff0c;尤其是里面的注释&#xff0c;如果不采用UTF-8&#xff0c;在vscode里面可能看着就是乱码。 试了各种工具&#xff0c;最后发现…...

C#WPF数字大屏项目实战08--生产量/良品统计

1、区域划分 生产量/良品统计这部分位于第二列的第二行 2、livechart拆线图 定义折线图,如下: <lvc:CartesianChart> <lvc:CartesianChart.Series> <!--设置Series的类型为 Line 类型, 该类型提供了一些折线图的实现--> <lvc:LineSeries/>…...

22、matlab锯齿波、三角波、方波:rectpuls()函数/sawtooth()函数/square()函数

1、采样的非周期性矩形 语法 语法1&#xff1a;y rectpuls(t) 返回一个以数组 t 中指示的采样时间采样的连续非周期性单位高度矩形脉冲&#xff0c;该矩形脉冲以 t 0 为中心。 语法2&#xff1a;y rectpuls(t,w) 生成一个宽度为 w 的矩形 参数 t:采样时间 w:矩形宽度…...

手机和WINDOWS电脑蓝牙连接后怎样放歌,无法选择媒体音频 蓝牙媒体音频勾选不上

手机和电脑蓝牙连接后怎样放歌 要将手机通过蓝牙连接到电脑并播放音乐&#xff0c;可以按照以下步骤操作&#xff1a; 确保手机和电脑都支持蓝牙功能&#xff0c;并且蓝牙功能已经开启。 在电脑上&#xff0c;打开“设置”> “设备”> “蓝牙和其他设备”。 点击“添…...

MatrixOne→MatrixOS:矩阵起源的创业史即将用“AI Infra”和“AI Platform”书写新章程

在数字化浪潮的推动下&#xff0c;MatrixOne的故事就像一部科技界的创业史诗&#xff0c;它始于一个简单而宏伟的梦想——构建一个能够支撑起新一代数字世界的操作系统。想象一下&#xff0c;在AIGC时代&#xff0c;数据流动如同“血液”&#xff0c;算法运转如同“心跳”&…...

vue3将自定义组件插入指定dom

需求简要描述 页面渲染了一个 id 为 videoPlayerId 的div盒子&#xff0c;代码自定义了一个名为CustomComponent 的组件&#xff0c;现在需要在vue3中&#xff0c;通过纯 js 的方式将组件 CustomComponent 插入 videoPlayerId 的div中&#xff0c;作为其子节点。 实现代码 C…...

flutter封装日历选择器(单日选择)

简单封装&#xff1a; 引入库&#xff1a;table_calendar import package:generated/l10n.dart; import package:jade/utils/JadeColors.dart; import package:jade/utils/Utils.dart; import package:util/easy_loading_util.dart; import package:flutter/material.dart; im…...

SwiftUI调用相机拍照

在 SwiftUI 中实现拍照功能&#xff0c;需要结合 UIViewControllerRepresentable 和 UIImagePickerController 来实现相机功能。下面是一个详细的示例&#xff0c;展示如何使用 SwiftUI 来实现拍照功能&#xff1a; 1. 创建一个 ImagePicker 组件 首先&#xff0c;创建一个 U…...

elasticsearch (dsl)

正排索引 和 倒排索引 正排索引&#xff1a;通过id &#xff0c;查询content 倒排索引&#xff1a;通过content&#xff0c;查询到符合的 ids eg&#xff1a; 正排索引就是通过《静夜思》&#xff0c;找到整片文章。 倒排索引通过“明月”&#xff0c;找到《静夜思》 《望…...

聊聊大模型微调训练全流程的思考

前言 参考现有的中文医疗模型&#xff1a;MedicalGPT、CareGPT等领域模型的训练流程&#xff0c;结合ChatGPT的训练流程&#xff0c;总结如下&#xff1a; 在预训练阶段&#xff0c;模型会从大量无标注文本数据集中学习领域/通用知识&#xff1b;其次使用{有监督微调}(SFT)优化…...

Python变量符号:深入探索与实用指南

Python变量符号&#xff1a;深入探索与实用指南 在Python编程的世界中&#xff0c;变量符号扮演着至关重要的角色。它们不仅是存储数据的容器&#xff0c;更是构建复杂逻辑和算法的基础。然而&#xff0c;对于初学者来说&#xff0c;Python的变量符号可能会带来一些困惑和挑战…...

实验八 页面置换模拟程序设计

网上找到的程序得到的答案经过手算验证是错的&#xff0c;所以自己实现了一个&#xff0c;具体实现看代码吧&#xff0c;多余的操作已经去掉了。 #include <stdio.h> #include <stdlib.h> #include <stdbool.h>#define VM_PAGE 7 /*假设每个页面可以存放10…...

Spring类加载机制揭秘:深度解析“卸载”阶段

1. 引言 在Spring框架中&#xff0c;类的加载和卸载是一个复杂但至关重要的过程。加载主要涉及将类的字节码加载到JVM中&#xff0c;创建对应的Class对象&#xff0c;并准备使其可用的过程。而卸载&#xff0c;则是指当一个类不再被需要时&#xff0c;将其从JVM中清除&#xf…...

Jupyter Notebook快速搭建

Jupyter Notebook why Jupyter Notebook Jupyter Notebook 是一个开源的 Web 应用程序&#xff0c;允许你创建和分享包含实时代码、方程、可视化和解释性文本的文档。其应用包括&#xff1a;数据清洗和转换、数值模拟、统计建模、数据可视化、机器学习等等。 Jupyter Notebo…...

Linux C语言:数组的定义和初始化

一、数组 1、定义 在程序设计中&#xff0c;为了处理方便&#xff0c;把具有相同类型的若干变量按有序的形式组织起来&#xff0c;具有一定顺序关系的若干个变量的集合就是数组 。 2、特点 组成数组的各个变量称为数组的元素数组中各元素的数据类型要求相同元素在内存中是连…...

spring框架限制接口是否要登录过才能访问

1、引入spring 、spring boot依赖&#xff0c;这部分不再多说&#xff0c;正常开发spring boot项目就可以。 2、定义类&#xff0c;实现WebMvcConfigurer接口 package com.hmblogs.config;import com.hmblogs.config.web.interceptor.PortalTokenInterceptor; import org.spri…...

【全开源】废品回收垃圾回收小程序APP公众号源码PHP版本

&#x1f31f;废品回收小程序&#xff1a;绿色生活的新助手&#x1f331; 一、引言 随着环保意识的逐渐提高&#xff0c;废品回收成为了我们日常生活中的重要一环。但是&#xff0c;如何更方便、高效地进行废品回收呢&#xff1f;今天&#xff0c;我要向大家推荐一款超级实用…...

勒索软件分析_目标文件扫描行为分析

BlackBasta首先通过 FindFirstVolumeW 与 FindNextVolumeW 实现系统中第一个卷的搜索和其余卷的遍历,之后通过 GetVolumePathNamesForVolumeNameW 检索指定卷的驱动器号和挂载的文件夹路径列表,然后通过 GetVolumeInformationW 获取关于指定卷的信息,具体代码如下所示。 Fin…...

2024050401-重学 Java 设计模式《实战代理模式》

重学 Java 设计模式&#xff1a;实战代理模式「模拟mybatis-spring中定义DAO接口&#xff0c;使用代理类方式操作数据库原理实现场景」 一、前言 难以跨越的瓶颈期&#xff0c;把你拿捏滴死死的&#xff01; 编程开发学习过程中遇到的瓶颈期&#xff0c;往往是由于看不到前进…...

HTML跨年烟花

目录 写在前面 关于小编 HTML简介 程序设计 系列文章 写在后面 写在前面 学会了这个html烟花秀&#xff0c;跨年就不缺文案喽~ 关于小编 平易近人&#xff0c;慈眉善目&#xff0c;爱交朋友&#xff0c;舍己为人&#xff0c;和蔼可亲&#xff0c;能说会道&#xff0c;…...

微服务第二轮

学习文档 背景 由于每个微服务都有不同的地址或端口&#xff0c;入口不同 请求不同数据时要访问不同的入口&#xff0c;需要维护多个入口地址&#xff0c;麻烦 前端无法调用nacos&#xff0c;无法实时更新服务列表 单体架构时我们只需要完成一次用户登录、身份校验&#xff…...

线性模型-分类

一、线性判别分析LDA 线性判别分析是一种经典的线性学习方法&#xff0c;在二分类问题上最早是Fisher提出的&#xff0c;亦称为Fisher判别分析。 Fisher判别分析是一种用于降维和分类的统计方法&#xff0c;旨在找到可以最好区分不同类别的特征。它基于类内方差和类间方差的比…...

OpenAI前董事会成员称Sam Altman因 “ 向董事会撒谎 ” 而被解雇

据前 OpenAI 董事会成员称&#xff0c;据称 Altman 隐瞒了他对 OpenAI 创业基金的所有权。 更详细的内容请参考原文&#xff1a; https://cointelegraph.com/news/sam-altman-fired-openai-board-allegations 据一位前董事会成员称&#xff0c;Sam Altman 因涉嫌向董事会隐瞒…...

【启明智显分享】WIFI6开发板ZX6010:开源OpenWrt SDK,接受定制!

在数字化飞速发展的当下&#xff0c;网络速度和稳定性已成为各行各业不可或缺的关键因素。今天&#xff0c;我们为大家推荐一款基于IPQ6010的AX1800方案ZX6010 Wi-Fi6开发板&#xff0c;为您的网络世界注入强大动力。 一、超强硬件配置 ZX6010搭载IPQ6010四核ARM Cortex A53处…...