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

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

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

相关文章

用langchain搭配最新模型ollama打造属于自己的gpt

langchain 前段时间去玩了一下langchain,熟悉了一下大模型的基本概念&#xff0c;使用等。前段时间meta的ollama模型发布了3.0,感觉还是比较强大的&#xff0c;在了解过后&#xff0c;自己去用前后端代码&#xff0c;调用ollama模型搭建了一个本地的gpt应用。 核心逻辑 开始搭…

Vue 封装elementUI的el-popover

1.封装公共组件 <template><div class"confirm-popover disInlineBlock ml10"><el-popover placement"bottom" v-model"visible" :trigger"triggerType"><div class"confirm-popover-popover"><…

vue3中进度条上加高亮圆点

实现效果 小圆点基于进度条定位&#xff08;left&#xff09;。 实现代码 <template><!-- 这块代码实现的功能&#xff1a;progressData遍历的年份进度数组&#xff0c;展示每年完成的进度--><ul><li v-for"(item, index) in progressData" :k…

Unity VR 零基础开发之 Pico4 MR

一、新建Unity2021.3.37 3D工程 二、切换到Android安卓平台 1、点击Unity编辑器左上角的Flie后&#xff0c;选择Build Setting选项。 2、弹出弹窗后&#xff0c;点击Android选项&#xff0c;然后再点击Switch Platform按钮切换成安卓平台。 3、切换完成后Android选项后面会显示…

Centos7下安装sqlplus并连接远程数据库

已经不用Oracle好多年了&#xff0c;然而近期有项目居然需要用到Oracle&#xff0c;并且是在内网的&#xff0c;所以没办法直接安装数据库连接工具来测试连接&#xff0c;只能在Linux的服务器上面安装sqlplus工具来连接&#xff0c;找资料完成了安装和连接&#xff0c;遂记录。…

3. QGis二次开发项目实践一之解决“无法定位程序输入点“

前言 本章讲述实现本项目实现过程中遇到的QGis二次开发库版本和Qt以及其他动态库的版本匹配问题问题复现 本项目是要作为一个子模块集成到用户的项目中本项目最初的开发环境为QGis3.28+Qt5.15.2,而当时并未问清楚用户开发环境所以交付给用户之后,出现了类似下图的问题 出现该…

uniapp利用canvas绘制ECG网格图附带心电图显示------代码

之前是一个关于如何绘制心电图的代码&#xff0c;后续需求是添加ECG的网格背景图也是利用canvas绘制的 先看代码&#xff1a; <template><view><page-head :title"title"></page-head><!-- 心电图显示区 --><view class"disp…

AI论文:一键生成论文的高效工具

说到这个问题&#xff0c;那真的得看你对“靠谱”的定义是怎样的啦&#xff1f; 众所周知&#xff0c;写论文是一项极其耗时间的事情&#xff0c;从开始的选题到文献资料搜索查阅&#xff0c;大纲整理等等一大堆的繁杂工作是极艰辛的。用AI写论文就不一样了&#xff0c;自动化…

深入QML:现代用户界面开发的强大工具20240606

深入QML&#xff1a;现代用户界面开发的强大工具 引言 在数字化时代&#xff0c;用户界面 (UI) 是任何应用程序不可或缺的一部分。为了提供流畅、直观且具有吸引力的用户体验&#xff0c;开发者需要一种强大且灵活的开发工具。QML&#xff08;Qt Modeling Language&#xff0…

简述在 Vue 中,子组件为何不可以修改父组件传递的 Prop ?

在 Vue 中&#xff0c;子组件不应该直接修改父组件传递的 Prop&#xff0c;这是基于 Vue 的单向数据流和组件之间通信的设计原则。以下是几个关键原因&#xff1a; 单向数据流&#xff1a;Vue 提倡的是单向数据流&#xff0c;即从父组件流向子组件。当父组件的状态发生变化时&…

php7.3安装phalcon扩展

php7安装3.4版本的phalcon扩展 适用于Centos6.x和Centos7.x系统&#xff0c;php使用7.1版本&#xff0c;wlnmp一键包已支持该扩展 phalcon扩展包地址&#xff1a;https://github.com/phalcon/cphalcon &#xff08;git clone 有可能连接不上&#xff09; 1、安装所需依赖&a…

Linux Kernel nf_tables 本地权限提升漏洞(CVE-2024-1086)

文章目录 前言声明一、netfilter介绍二、漏洞成因三、漏洞危害四、影响范围五、漏洞复现六、修复方案临时解决方案升级修复方案 前言 2024年1月&#xff0c;各Linux发行版官方发布漏洞公告&#xff0c;修复了一个 netfilter:nf_tables 模块中的释放后重用漏洞&#xff08;CVE-…

基于语音识别的智能电子病历(其他)CC、HPI、ROS案例分析

门诊使用基于语音识别的智能电子病历相对要少一些。很多系统的门诊系统包含了丰富的模版&#xff0c;美国退伍军人医院在非常早的时候&#xff08;2010年之前&#xff09;就通过使用大量的模版来进行处理门诊的数据录入。下面分析中的截图也是来自一些美国退伍军人医院的系统。…

网络高频攻击手段与基本防护措施总结

主要攻击手段 一、云平台攻击 云平台攻击是指针对云服务器的恶意行为&#xff0c;旨在获取非法访问权限、窃取敏感数据或者破坏服务器的正常运行。云平台攻击的形式多样&#xff0c;以下是对云平台攻击的一些主要类型和特点的详细分析&#xff1a; 攻击类型&#xff1a; 凭据…

idea修改国际化语言教程

教程背景 第一种&#xff0c;如果以前的项目已经有国际化语言了&#xff0c;现在的项目是导入的。 第二种&#xff0c;你中途把idea删除卸载了&#xff0c;在安装了别的版本&#xff0c;把这个项目导入进来后的。 第三种&#xff0c;你下载或复制的别人的项目。 以上这三种…

如何实现vue项目不同屏幕适配(2024最新)

文章目录 1.下载插件&#xff0c;修改px单位为rem单位2.配置vue.config.js(如下图位置所示)3.屏幕自适应4.项目实际使用 1.下载插件&#xff0c;修改px单位为rem单位 npm i postcss-plugin-px2rem2.配置vue.config.js(如下图位置所示) 注意在根目录下&#xff0c;如果没有该文…

MySQL深分页,limit 100000,10 优化

文章目录 一、limit深分页为什么会变慢二、优化方案2.1 通过子查询优化&#xff08;覆盖索引&#xff09;回顾B树结构覆盖索引把条件转移到主键索引树 2.2 INNER JOIN 延迟关联2.3 标签记录法&#xff08;要求id是有序的&#xff09;2.4 使用between...and... 我们日常做分页需…

浅谈人工智能在新型电力系统建设和电力行业中的应用和未来发展趋势

文章目录 概要应用场景分析未来趋势分析小结备注 概要 人工智能在新型电力系统建设和电力行业中具有广泛的应用和潜力。它可以大大提高电力系统的运行效率、可靠性和安全性&#xff0c;同时减少能源浪费和环境影响。 应用场景分析 能源预测和优化&#xff1a;人工智能可以通过…

引擎:UI

一、控件介绍 Button 按钮 创建一个按钮 按钮禁用 精灵模式 颜色模式 缩放模式 绑定点击事件 EditBox 输入框 Layout 布局 支持水平排列、垂直排列、背包排列 PageView 页面视图 ProgressBar 进度条 RichText 富文本 绑定点击事件 事件可以被其它标签包裹 图文混排 Scroll…

AG32 MCU+FPGA 使用感受

前言&#xff1a; 笔者35了&#xff0c;10多年前开始玩单片机/FPGA啥的&#xff0c;从现在回想过去&#xff0c;眼下真的是我们国家微电子发展的好时候。各种各样的国产单片机&#xff0c;FPGA啥的&#xff0c;想想本科的时候用的Freescale&#xff0c;后来用的STM32&#xff0…