通过 xlsx 解析上传excel的数据
一、前言
在前端开发中,特别是在后台管理系统中,导入数据(上传excel)到后端是是否常见的功能;而一般的实现方式都是通过接口将excel上传到后端,再有后端进行数据解析并做后续操作。
今天,来记录一下前端通过 xlsx 直接解析得到数据。
二、安装依赖
npm i XLSX --save
三、上传文件解析数据
<template><div><!-- 不自动上传,不显示上传的列表,只能上传一个 --><el-uploadref="xlsxUploadRef"action="":show-file-list="false":auto-upload="false":on-change="onChange"accept=".xls,.xlsx":limit="1"><!-- 自定义按钮 --><slot></slot></el-upload></div>
</template><script>
import * as XLSX from 'xlsx'
export default {name: 'ResolveExcel',props: {fileType: { // 数据表类型type: Number,default: 1}},methods: {readFile(file) {return new Promise((resolve) => {const reader = new FileReader()reader.readAsBinaryString(file)reader.onload = (ev) => {resolve(ev.target.result)}})},async onChange(file) {// 格式检验if (!/\.(xls|xlsx)$/.test(file.name.toLowerCase())) {this.$modal.msgError('上传格式不正确,请上传xls或者xlsx格式')return false}const dataBinary = await this.readFile(file.raw)const workBook = XLSX.read(dataBinary, {type: 'binary',cellDates: true})const workSheet = workBook.Sheets[workBook.SheetNames[0]]const data = XLSX.utils.sheet_to_json(workSheet)console.log('XLSX数据', data) // excel 中没事数据是,data = []// 格式化数据, 并将数据回传;formatData 方法需要根据excel内的数据进行开发;此处并没有实现,实现开发中,该方法可能在父组件实现(多个地方使用,表格内容不一致,无法共用)const resultArr = this.formatData(data)this.$emit('getXlsxData', resultArr);this.$nextTick(() => { // 数据拿到后,清空上传列表,才能继续上传解析this.$refs.xlsxUploadRef.clearFiles();})}}
}
</script>
文章仅为本人学习过程的一个记录,仅供参考,如有问题,欢迎指出!
相关文章:
通过 xlsx 解析上传excel的数据
一、前言 在前端开发中,特别是在后台管理系统中,导入数据(上传excel)到后端是是否常见的功能;而一般的实现方式都是通过接口将excel上传到后端,再有后端进行数据解析并做后续操作。 今天,来记录…...
Flink系列之:JDBC SQL 连接器
Flink系列之:JDBC SQL 连接器 一、JDBC SQL 连接器二、依赖三、创建 JDBC 表四、连接器参数五、键处理六、分区扫描七、Lookup Cache八、幂等写入九、JDBC Catalog十、JDBC Catalog 的使用十一、JDBC Catalog for PostgreSQL十二、JDBC Catalog for MySQL十三、数据…...
OpenCV与YOLO学习与研究指南
引言 OpenCV是一个开源的计算机视觉和机器学习软件库,而YOLO(You Only Look Once)是一个流行的实时对象检测系统。对于大学生和初学者而言,掌握这两项技术将大大提升他们在图像处理和机器视觉领域的能力。 基础知识储备 在深入…...
hive中map相关函数总结
目录 hive官方函数解释示例实战 hive官方函数解释 hive官网函数大全地址: hive官网函数大全地址 Return TypeNameDescriptionmapmap(key1, value1, key2, value2, …)Creates a map with the given key/value pairs.arraymap_values(Map<K.V>)Returns an un…...
HttpServletRequestWrapper、HttpServletResponseWrapper结合 过滤器 实现接口的加解密、国际化
目录 一、HttpServletRequestWrapper代码 二、HttpServletRequestWrapper代码 三、加解密过滤器代码 四、国际化过滤器代码 一、HttpServletRequestWrapper代码 package com.vteam.uap.security.httpWrapper;import jakarta.servlet.ReadListener; import jakarta.servlet.…...
最大通关数
洛洛和晶晶计划一起挑战峡谷深渊,峡谷左右有不同数量的关卡,每个关卡需要不同的紫水晶通关,用给定的紫水晶依次通过最多的关卡。 (笔记模板由python脚本于2023年12月23日 12:16:50创建,本篇笔记适合熟悉贪心算法的coder翻阅) 【学…...
MySQL中EXPLAIN关键字解释
什么是MySQL的索引 索引是帮助MySQL高效获取数据的数据结构 MySQL再存储数据之外,数据库系统中还维护者满足特定查找算法的数据结构,这些数据结构以某种引用表中的数据,这样我们就可以通过数据结构上实现的高级查找算法来快速…...
初始JavaScript详解【精选】
Hi i,m JinXiang ⭐ 前言 ⭐ 本篇文章主要介绍初始JavaScript以及部分理论知识 🍉欢迎点赞 👍 收藏 ⭐留言评论 📝私信必回哟😁 🍉博主收将持续更新学习记录获,友友们有任何问题可以在评论区留言 目录 ⭐…...
计数排序,基数排序及排序总结
稳定性:当要排序的数组有相同数据时,排序后相同数据的相对位置不变,则称该排序算法稳定,否则即为不稳定. 在这里我在说说计数排序吧,计数排序就是将给定数组中的数进行计数,在从小到大依次输出即可。简单过…...
【LeetCode】459. 重复的子字符串(KMP2.0)
今日学习的文章链接和视频链接 leetcode题目地址:459. 重复的子字符串 代码随想录题解地址:代码随想录 题目简介 给定一个非空的字符串 s ,检查是否可以通过由它的一个子串重复多次构成。 看到题目的第一想法(可以贴代码) 1.…...
CSS(五) -- 动效实现(立体盒子旋转-四方体+正六边)
一. 四面立体旋转 正方形旋转 小程序中 wxss中 <!-- 背景 --><view class"dragon"><!--旋转物体位置--><view class"dragon-position"><!--旋转 加透视 有立体的感觉--><view class"d-parent"><view …...
Win10使用OpenSSL生成证书的详细步骤(NodeJS Https服务器源码)
远程开启硬件权限,会用到SSL证书。 以下是Win10系统下用OpenSSL生成测试用证书的步骤。 Step 1. 下载OpenSSL,一般选择64位的MSI Win32/Win64 OpenSSL Installer for Windows - Shining Light Productions 一路点下来,如果后续请你捐款ÿ…...
sql_lab之sqli中的堆叠型注入(less-38)
堆叠注入(less-38) 1.判断注入类型 http://127.0.0.3/less-38/?id1 and 12 -- s 没有回显 http://127.0.0.3/less-38/?id1 and 11 -- s 有回显 则说明是单字节’注入 2.查询字段数 http://127.0.0.3/less-38/?id1 order by 4 -- s 报错 http:/…...
第5章-第3节-Java中对象的封装性以及局部变量、this、static
1、局部变量 【问题1】:什么是局部变量? 答:定义在局部位置的变量就是局部变量。 【问题2】:什么是局部位置? 答:方法的形参位置、方法体的内部。 【位置关系图】: class Xxx { //成员位…...
IP应用场景的规划
IP地址作为互联网通信的基石,在现代社会中扮演着至关重要的角色。本文将深入探讨IP地址在不同应用场景中的规划与拓展,探讨其在网络通信、安全、商业、医疗和智能城市等领域的关键作用与未来发展趋势。 IP地址的基本原理 IP地址是分配给网络上设备的数…...
27 redis 的 sentinel 集群
前言 redis 的哨兵的相关业务功能的实现 哨兵的主要作用是 检测 redis 主从集群中的 master 是否挂掉, 单个哨兵节点识别 master 下线为主管下线, 超过 quorum 个 哨兵节点 认为 master 挂掉, 识别为 客观下线 然后做 failover 的相关处理, 重新选举 master 节点 我们这里…...
计算机网络 网络安全技术
网络安全基本要素 机密性 不泄密完整性 信息不会被破坏可用性 授权用户 正常有效使用可控性 被控制可审查性 网络安全的结构层次 物理安全 物理介质安全控制 计算机操作系统安全服务 应用层次 被动攻击 :截获信息 主动攻击 : 中断信息,篡改,伪造 篡改 …...
WebAssembly 的魅力:高效、安全、跨平台(下)
🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云…...
二维码智慧门牌管理系统升级:确保公安机关数据安全无忧
文章目录 前言一、多重安全防护措施二、安全措施综述与展望 前言 数据安全挑战与重要性 在数字化社会,数据安全对公共管理机构,尤其是公安机关而言,至关重要。随着二维码技术在门牌管理系统中的广泛应用,管理变得更智能、更便捷。…...
Golang leetcode59 螺旋矩阵
螺旋矩阵 leetcode59 初次尝试,从中心向外 func main() {n : 3fmt.Println(generateMatrix(n)) }// 初版,我们从中心点开始 func generateMatrix(n int) [][]int {//1.nXn矩阵table : make([][]int, n)for i : 0; i < n; i {table[i] make([]int, …...
Google与Cohere发布新一代音频AI模型
Google LLC和Cohere Inc.今日发布了专为音频处理任务优化的新人工智能模型。这家搜索巨头的算法Gemini 3.1 Flash Live能够自动化客户服务交互。Cohere的新AI模型则专为语音转录而设计。两款模型的输出质量都比其前代产品有显著提升。企业可使用Gemini 3.1 Flash Live构建语音智…...
JetBrains推出AI智能体管理平台Central
为了帮助开发者控制日益增长的AI编程智能体队伍,JetBrains正在推出JetBrains Central,这是一个面向团队的智能体开发平台,用于管理和维持对这些智能体的监督。JetBrains Central的早期访问计划将于2026年第二季度开始,将有限量的设…...
AI 模型量化精度控制与评估方法
AI模型量化精度控制与评估方法 随着人工智能技术的快速发展,AI模型在边缘计算、移动设备等资源受限场景中的应用日益广泛。为了在有限的计算资源下保持模型性能,量化技术成为关键手段。量化过程中精度的损失直接影响模型的可靠性,因此量化精…...
AOP 失效的 7 种死法与复活指南
还是那句话,知识是一个返回的过程,追一句:时间出真知今天我们要聊的是一个“灵异事件”频发的领域——Spring AOP 失效。你是不是也经历过这种崩溃:“明明加了 Transactional,为什么数据库报错不回滚?” “…...
管人对账累垮人?巨有科技智慧市集系统一招减负
从城市商圈到景区古镇,从乡村田园到文创园区,各类市集遍地开花,但管理难题始终是制约行业发展的最大瓶颈。人工登记杂乱、对账结算繁琐、现场管控滞后、数据完全空白,一场中型市集就要耗费大量人力物力,大型市集更是纠…...
DML实战:价格弹性预测的经济学与机器学习融合之道
1. 价格弹性预测:经济学与机器学习的碰撞 第一次听说价格弹性还能用机器学习预测时,我的反应和大多数经济学背景的同事一样:"这不就是个回归问题吗?"直到亲眼看到某电商平台用DML模型把促销预算节省了23%,才…...
从SWF中提取加密通信协议:JPEXS Free Flash Decompiler安全分析报告
从SWF中提取加密通信协议:JPEXS Free Flash Decompiler安全分析报告 【免费下载链接】jpexs-decompiler JPEXS Free Flash Decompiler 项目地址: https://gitcode.com/gh_mirrors/jp/jpexs-decompiler 在网络安全分析领域,SWF(Shockwa…...
别再为版本兼容头疼了!手把手教你搞定Matlab R2014b与NI VeriStand的联合仿真环境
别再为版本兼容头疼了!手把手教你搞定Matlab R2014b与NI VeriStand的联合仿真环境 在硬件在环(HIL)测试领域,Matlab与NI VeriStand的联合仿真环境搭建是许多工程师的必经之路。然而,版本兼容性问题常常成为拦路虎&…...
Delphi 终极实战:将自定义控件打包成 BPL,安装到 Delphi 工具栏(组件库实战)
前面我们手写了专属 UI 组件库(MyUIClass.pas),但如果你想在以后的项目中一键调用这些控件,而不是每次都复制粘贴代码,那就必须将它们打包成 Delphi 组件包(BPL 文件)。学会这篇,你将…...
【Python张量计算实战宝典】:20年AI架构师亲授5大高频场景优化技巧,错过再等一年
第一章:张量计算基础与PyTorch/TensorFlow双框架选型指南张量是深度学习的核心数据结构,本质为多维数组,支持自动微分、GPU加速与动态/静态计算图构建。理解其内存布局(如C-contiguous vs. Fortran-contiguous)、广播机…...
