当前位置: 首页 > 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…...

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!

简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求&#xff0c;并检查收到的响应。它以以下模式之一…...

七、数据库的完整性

七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...

莫兰迪高级灰总结计划简约商务通用PPT模版

莫兰迪高级灰总结计划简约商务通用PPT模版&#xff0c;莫兰迪调色板清新简约工作汇报PPT模版&#xff0c;莫兰迪时尚风极简设计PPT模版&#xff0c;大学生毕业论文答辩PPT模版&#xff0c;莫兰迪配色总结计划简约商务通用PPT模版&#xff0c;莫兰迪商务汇报PPT模版&#xff0c;…...

Vue ③-生命周期 || 脚手架

生命周期 思考&#xff1a;什么时候可以发送初始化渲染请求&#xff1f;&#xff08;越早越好&#xff09; 什么时候可以开始操作dom&#xff1f;&#xff08;至少dom得渲染出来&#xff09; Vue生命周期&#xff1a; 一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个…...

文件上传漏洞防御全攻略

要全面防范文件上传漏洞&#xff0c;需构建多层防御体系&#xff0c;结合技术验证、存储隔离与权限控制&#xff1a; &#x1f512; 一、基础防护层 前端校验&#xff08;仅辅助&#xff09; 通过JavaScript限制文件后缀名&#xff08;白名单&#xff09;和大小&#xff0c;提…...

深度解析:etcd 在 Milvus 向量数据库中的关键作用

目录 &#x1f680; 深度解析&#xff1a;etcd 在 Milvus 向量数据库中的关键作用 &#x1f4a1; 什么是 etcd&#xff1f; &#x1f9e0; Milvus 架构简介 &#x1f4e6; etcd 在 Milvus 中的核心作用 &#x1f527; 实际工作流程示意 ⚠️ 如果 etcd 出现问题会怎样&am…...