前端将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.第二种方式就是哪种第二种方式

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

eNSP学习——配置RIP的版本兼容、定时器和协议优先级

目录 主要命令 原理概述 实验内容 实验拓扑 实验目的 实验编址 实验步骤 1、基本配置 2、配置RIP协议的版本兼容 3、配置RIP的定时器 4&#xff0e;配置RIP协议优先级 需要eNSP各种配置命令的点击链接自取&#xff1a;华为&#xff45;NSP各种设备配置命令大全PDF版…

Android 蓝牙概述

一、什么是蓝牙 蓝牙是一种短距离&#xff08;一般10m内&#xff09;无线通信技术。蓝牙技术允许固定和移动设备在不需要电缆的情况下进行通信和数据传输。 “蓝牙”这名称来自10世纪的丹麦国王哈拉尔德(Harald Gormsson)的外号。出身海盗家庭的哈拉尔德统一了北欧四分五裂的国…

揭秘智能测径仪省钱之道!每年能为每条产线省上百万!

在当今竞争激烈的市场环境下&#xff0c;企业们都在不断寻求提高生产效率、降低成本的方法。而智能测径仪的出现&#xff0c;为圆形钢材、螺纹钢等生产企业实现这一目标提供了有力的支持。 智能测径仪被广泛应用于高线、铸管、圆钢、螺纹钢、钢筋等的轧制生产线中&#xff0c;进…

计算机msvcr120.dll丢失怎样修复,一招搞定msvcr120.dll丢失问题

在计算机使用过程中&#xff0c;我们经常会遇到一些错误提示&#xff0c;其中之一就是“计算机缺失msvcr120.dll”。那么&#xff0c;这个错误是什么意思呢&#xff1f;又该如何解决呢&#xff1f;本文将从以下几个方面进行详细解析。 一&#xff0c;了解msvcr120.dll文件 msv…

Flutter基础 -- Flutter布局练习(小项目)

目录 1. Splash 布局&#xff08;第一页&#xff09; 1.1 目标 1.2 当前效果图 1.3 创建 Splash 界面 1.4 设置 MaterialApp 1.5 设置 Splash 背景色 1.6 布局 Splash 界面 1.7 总结 2. Splash 圆角图片 2.1 目标 2.2 当前效果图 2.3 蓝湖下载图片 2.4 图片导入项…

5G发牌五周年丨移远通信:全面发力,加快推进5G技术服务社会发展

2024年6月6日&#xff0c;正值中国5G商用牌照发牌五周年。根据移动通信“十年一代”的规律&#xff0c;5G已走过一半征程。在过去的五年时间里&#xff0c;5G技术从萌芽到成熟&#xff0c;深刻改变了工业、农业、医疗及消费端等各个领域的发展脉络。无论是无人机配送、自动驾驶…

自动化执行任务的脚本代码分享!

在当今信息化社会&#xff0c;自动化执行任务的脚本代码已经成为提高工作效率、减少人工错误的重要工具。 无论是数据处理、文件操作&#xff0c;还是网络请求、系统监控&#xff0c;脚本代码都能帮助我们实现自动化操作&#xff0c;从而释放人力&#xff0c;让我们有更多时间…

一种基于小波域的增强独立分量分析方法(MATLAB)

独立分量分析ICA是二十世纪九十年代发展起来的一种多元统计和计算技术&#xff0c;目的是用来分离或提取随机变量、观测数据或信号混合物中具有独立特性的隐藏分量。ICA可以看作是主分量分析PCA和因子分析FA的扩展。与PCA和FA相比&#xff0c;ICA是一种更强有力的技术。当PCA和…

家政服务小程序,提高企业在市场中的竞争力

近几年&#xff0c;人们对家政的需求持续增加&#xff0c;面对小程序的快速发展&#xff0c;互联网家政的模式成为了市场新的发展方向&#xff0c;越来越多的居民也开始在线上预约家政服务。随着当下人们对家政的需求日益提升&#xff0c;线上家政小程序利用各种信息技术&#…

<PLC><汇川><伺服>汇川SV630N伺服驱动使用转矩模式时报错E234.0的一种解决办法

前言 本文是使用汇川SV630N,进行EtherCat通讯,使用转矩模式时,当希望电机反向时电机会报错的一种解决办法。 错误代码 PLC端添加EtherCat轴,并编写控制指令,使用mc轴控指令: 当设定了目标力矩、力矩斜坡以及限制速度后,触发指令块,伺服会驱动电机进行运动。 在电机空…

Ripple:使用Wavelet Approximations来加速FHE的Programmable Bootstraps

1. 引言 University of Delaware和Nillion团队的 Charles Gouert、Mehmet Ugurbil、Dimitris Mouris、Miguel de Vega 和 Nektarios G. Tsoutsos&#xff0c;2024年论文《Ripple: Accelerating Programmable Bootstraps for FHE with Wavelet Approximations》&#xff0c;开源…

vue 文件预览mp4、txt、pptx、xls、xlsx、docx、pdf、html、xml

vue 文件预览 图片、mp4、txt、pptx、xls、xlsx、docx、pdf、html、xml 最近公司要做一个类似电脑文件夹的功能&#xff0c;支持文件夹操作&#xff0c;文件操作,这里就不说文件夹操作了&#xff0c;说说文件预览操作&#xff0c;本人是后端java开发&#xff0c;前端vue&#…

【Qt】Qt QTreeWidget隐藏列名称(横向表头)

1. 效果 未隐藏 隐藏 2. 方法 方法1 ui->treeWidget->header()->hide();方法2 ui->treeWidget->header()->setVisible(false);

猫毛过敏终极解决神器,使用宠物空气净化器享受快乐撸猫~

作为一位经验丰富的宠物主人&#xff0c;与猫咪共度的时光确实充满了乐趣。但是&#xff0c;猫毛和皮屑对某些人来说可能会成为头疼的问题&#xff0c;引发过敏症状&#xff0c;例如打喷嚏、流鼻涕&#xff0c;甚至呼吸急促。这些反应不仅会干扰宠物主人的日常生活&#xff0c;…

数据报表统计实现

目录 一&#xff1a;背景 二&#xff1a;实现过程 一&#xff1a;背景 最近需要开发一个数据统计的功能&#xff0c;主要是按照各种维度统计客户的数据&#xff0c;一般是按照日期来展示数量和变化情况。下面我们来梳理下实现的过程。 二&#xff1a;实现过程 1&#xff1a…

锻炼 精读笔记 01

元数据 [!abstract] 锻炼 书名&#xff1a; 锻炼作者&#xff1a; 丹尼尔利伯曼简介&#xff1a; 我们是为休息而生&#xff0c;还是为跑而生&#xff1f; 跑步会毁了你的膝盖吗? 哪种运动项目蕞适合我&#xff1f; 懒惰是不正常的行为吗&#xff1f; 每晚都需要睡够 8 个小时…

Python 引用数据类型

列表List 定义列表 可以将不同的基本数据类型或者列表装到一个列表里 my_list [1,2,3,4,5] print(my_list) # [1, 2, 3, 4, 5] 直接打印出列表的内容 print(type(my_list)) # <class list>my_list ["1","2","3","4","…

CV Method:超全学习率策略总结

文章目录 前言一、LambdaLR二、StepLR三、MultiStepLR四、ConstantLR五、LinearLR六、PolynomialLR七、ChainedScheduler八、ExponentialLR九、CosineAnnealingLR十、OneCycleLR十一、ReduceLROnPlateau十二、自定义学习率类函数总结 前言 在深度学习中&#xff0c;学习率对模…

数据分析工具|数据分析利器与业务决策的好帮手vividiem Desktop

&#x1f4eb; 作者简介&#xff1a;「六月暴雪飞梨花」&#xff0c;专注于研究Java&#xff0c;就职于科技型公司后端工程师 &#x1f3c6; 近期荣誉&#xff1a;华为云云享专家、阿里云专家博主、腾讯云优秀创作者、ACDU成员 &#x1f525; 三连支持&#xff1a;欢迎 ❤️关注…

如何修复d3dcompiler43.dll丢失问题,这三种方法可轻松解决

在计算机使用过程中&#xff0c;我们常常会遇到一些错误提示&#xff0c;其中之一就是“计算机缺失d3dcompiler43.dll”。这个问题可能会影响到计算机的正常运行&#xff0c;让我们无法正常使用某些软件或者游戏。那么&#xff0c;究竟什么是d3dcompiler43.dll&#xff1f;为什…