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

vue3导入excel并解析excel数据渲染到表格中,纯前端实现。

需求

用户将已有的excel上传到系统,并将excel数据同步到页面的表格中进行二次编辑,由于excel数据不是最终数据,只是批量的一个初始模板,后端不需要存储,所以该功能由前端独立完成。

吐槽

系统中文件上传下载预览三部曲走了一遍,万万没想到还要自己实现同步数据。

实际

反手各种资料开始查阅,终于找到了可以完美实现该需求的方法,来记录下我的实现方案。希望对有需要的小伙伴有帮助。

注意以下为正文(重要内容),好好阅读,不要漏掉重要知识点奥~ 


涉及到的主要知识点

  • 插件xlsx
  • elementUI  plus中的Upload 上传组件
  • 动态设置 ref

展开说说:

1、插件xlsx

// 在项目根路径 安装xlsx
npm install -S xlsx// 在需要使用的页面引入xlsx
import * as xlsx from 'xlsx'

2、upload上传组件

上传组件的自动上传方法,传参方法,详细可翻阅elementUI plus官网

3、动态设置ref

涉及到动态设置ref的原因:

一是由于upload组件在设置了 :limit="1",在上传第一个文件之后,浏览器会保存着我们已经上传的文件,导致我们继续上传文件的时候,页面没有反应;解决该问题需要在on-success钩子函数中通过ref来清除已经上传的文件。

<template><div><el-uploadref="importExcelRef":action="VITE_APP_API_URL":limit="1":show-file-list="false"class="uploadExcelContent":on-success="importSuccess"    ><div title="导入excel"><div class="importExcel"></div></div></el-upload></div>
</template>
<script setup>import { ref } from 'vue'const importExcelRef = ref(null)const importSuccess = ()=>{importExcelRef.value.clearFiles();}
</script>

二是因为表单中存在多个表格需要导入excel作为基础数据进行编辑,且表格数量不固定,是根据后端数据渲染的,所以在清空上传文件的时候,需要处理未知的多个,所以需要动态设置ref。

<template><div><el-upload :ref="(el) => handleSetUploadRefMap(el, rowIndex,compIndex)"><div title="导入excel"  ><div class="importExcel"></div></div></el-upload></div>
</template>
<script>
import { ref } from 'vue'
const uploadRefMap = ref({});
// 动态设置upload Ref
const handleSetUploadRefMap = (el,rowIndex,compIndex) => {if (el) {uploadRefMap.value[`Upload_Ref_${rowIndex}_${compIndex}`] = el}
}
</script>

需求实现代码

<template><div><!-- 上传excel --><el-upload:ref="(el) => handleSetUploadRefMap(el)"action="":http-request="httpExcelRequest":limit="1":show-file-list="false"class="uploadExcelContent":data={}><div title="导入excel" style="cursor: pointer;" ><div>导入excel</div></div></el-upload><!-- 列表 --><div class="excel-content"  v-for="(rowItem,rowIndex) in excelList" :key="rowIndex"><div class="comp" v-for="(comp,compIndex) in rowItem" :key="compIndex">{{comp}}</div></div></div>
</template><script setup name="mainContent">
import * as xlsx from 'xlsx' 
import {ElMessage} from 'element-plus'
import { ref } from 'vue'
const uploadRefMap = ref({});
const excelList = ref([])// 动态设置upload Ref
const handleSetUploadRefMap = (el) => {if (el) {uploadRefMap.value[`Upload_Ref`] = el}
}// 文件上传自定义
const  httpExcelRequest = async (op) => {// 获取除文件之外的参数,具体根据实际业务需求来console.log(op.data)// 获取上传的excel  并解析数据let file = op.filelet dataBinary = await readFile(file);let workBook = xlsx.read(dataBinary, { type: "binary", cellDates: true })let workSheet = workBook.Sheets[workBook.SheetNames[0]]const excelData = xlsx.utils.sheet_to_json(workSheet,{ header: 1 })excelList.value = excelDataconsole.log(excelData)if(uploadRefMap.value[`Upload_Ref`]){uploadRefMap.value[`Upload_Ref`].clearFiles();}
}const readFile = (file) => {
return new Promise((resolve) => {let reader = new FileReader()reader.readAsBinaryString(file)reader.onload = (ev) => {resolve(ev.target?.result)}
})
}</script><style lang="scss" scoped>
.uploadExcelContent{display: flex;flex-direction: row;
}
.excel-content{display: flex;flex-direction: row;align-items: center;.comp{width: 200px;font-size: 12px;}
}
</style>

由于业务需求不同,对表格数据的详细处理逻辑,就不在这里显示了,可根据自己的数据结构进行赋值操作,运行demo后可以直接在控制台查看拿到的excel数据。

今天就到这里了,会继续加油的,是亮晶晶的芋头哟~

相关文章:

vue3导入excel并解析excel数据渲染到表格中,纯前端实现。

需求 用户将已有的excel上传到系统&#xff0c;并将excel数据同步到页面的表格中进行二次编辑&#xff0c;由于excel数据不是最终数据&#xff0c;只是批量的一个初始模板&#xff0c;后端不需要存储&#xff0c;所以该功能由前端独立完成。 吐槽 系统中文件上传下载预览三部…...

Java常用API之Encoders类解读

写在开头&#xff1a;本文用于作者学习Java常用API 我将官方文档中Encoders类中所有API全测了一遍并打印了结果&#xff0c;日拱一卒&#xff0c;常看常新 在Spark中&#xff0c;Encoders类提供了一些静态方法用于创建不同数据类型的编码器。 首先&#xff0c;我遇到这样一个…...

java中大型医院HIS系统源码 Angular+Nginx+SpringBoot云HIS运维平台源码

java中大型医院HIS系统源码 AngularNginxSpringBoot云HIS运维平台源码 云HIS系统是一款满足基层医院各类业务需要的健康云产品。该产品能帮助基层医院完成日常各类业务&#xff0c;提供病患预约挂号支持、病患问诊、电子病历、开药发药、会员管理、统计查询、医生工作站和护士工…...

windows部署Jenkins并远程部署tomcat

目录 1、Jenkins官网下载Jenkins 2、安装Jenkins 3、修改Home directory 4、插件安装及系统配置 5、Tomcat安装及配置 5.1、修改配置文件,屏蔽以下代码 5.2、新增登录用户 5.3、编码格式修改 5.4、启动tomcat 6、Jenkins远程部署war包 6.1、General配置 6.2、Sourc…...

设计模式|责任链模式(Chain of Responsibility Pattern)

文章目录 结构优点缺点使用责任链的步骤示例有哪些知名框架采用了责任链模式责任链模式和链表有什么关联常见面试题 责任链模式&#xff08;Chain of Responsibility Pattern&#xff09;是一种行为设计模式&#xff0c;它允许你创建一个对象链。请求将沿着这个链传递&#xff…...

文件服务器之二:SAMBA服务器

文章目录 什么是SAMBASAMBA的发展历史与名称的由来SAMBA常见的应用 SAMBA服务器基础配置配置共享资源Windows挂载共享Linux挂载共享 什么是SAMBA 下图来自百度百科 SAMBA的发展历史与名称的由来 Samba是一款开源的文件共享软件&#xff0c;它基于SMB&#xff08;Server Messa…...

20.安全性测试与评估

每年都会涉及&#xff1b;可能会考大题&#xff1b;多记&#xff01;&#xff01;&#xff01; 典型考点&#xff1a;sql注入、xss&#xff1b; 从2个方面记&#xff1a; 1、测试对象的功能、性能&#xff1b; 2、相关设备的工作原理&#xff1b; 如防火墙&#xff0c;要了解防…...

阿里巴巴实习面经

本人bg&#xff1a;浙江大学&#xff0c;计算机研二&#xff0c;本科也是浙大计算机专业的。 在阿里巴巴达摩院实习&#xff0c;算法岗&#xff0c;我是去年拿到的阿里巴巴达摩院的实习offer&#xff0c;这个过程还是比较惊心动魄&#xff0c;所以我称之为惊心动魄版本&#xf…...

javaweb学习(day11-监听器Listener过滤器Filter)

一、监听器Listener 1 Listener介绍 Listener 监听器它是 JavaWeb 的三大组件之一。JavaWeb 的三大组件分别是&#xff1a;Servlet 程 序、Listener 监听器、Filter 过滤器 Listener 是 JavaEE 的规范&#xff0c;就是接口 监听器的作用是&#xff0c;监听某种变化(一般就是对…...

教你快速认识Java中的抽象类和接口

目录 引言 抽象类&#xff08;Abstract Class&#xff09; 抽象类的概念 抽象类的图标 抽象类的语法 抽象类的特点 接口&#xff08;Interface&#xff09; 接口的概念 接口的图标 接口的语法 接口的特点 接口的使用 接口的意义 抽象类与接口的区别 Object类 结…...

Linux第5课 Linux目录介绍

文章目录 Linux第5课 Linux目录介绍一、打开系统目录二、查看系统目录 Linux第5课 Linux目录介绍 系统目录就是指操作系统的主要文件存放的目录&#xff0c;目录中的文件直接影响到系统是否正常工作&#xff0c;了解这些目录的功能&#xff0c;对使用系统会有很大的帮助。 一…...

GitHub要求2FA?不慌,有它(神锁离线版)帮你!

GitHub宣布&#xff0c;到 2023 年底&#xff0c;所有用户都必须要启用双因素身份验证 (2FA)&#xff0c;不能只用密码啦。 说实话&#xff0c;听到这消息小编是非常高兴的。 正如GitHub的首席安全官Mike Hanley所说&#xff0c;软件供应链是从开发者开始的&#xff0c;保护开…...

C语言第四十弹---预处理(下)

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】 预处理 1、#和## 1.1 #运算符 1.2、##运算符 2、命名约定 3、#undef 4、命令行定义 5、条件编译 6、头文件的包含 6.1、头文件被包含的方式 6.1.1、本地…...

SYS-2722音频分析仪SYS2722

181/2461/8938产品概述&#xff1a; Audio Precision 2722 音频分析仪是 Audio Precision 屡获殊荣的 PC 控制音频分析仪的旗舰型号&#xff0c;长期以来一直是音频设备设计和测试的全球公认标准。功能齐全的 SYS-2722 提供了测试转换器技术最新进展所需的无与伦比的失真和噪声…...

下载页面上的视频

引言&#xff1a;有些页面上的视频可以直接右键另存为或者F12检索元素找到视频地址打开后保存&#xff0c;但有些视频页面是转码后的视频&#xff0c;不能直接另存为视频格式&#xff0c;可以参考下本方法 以该页面视频为例&#xff1a;加载中...点击查看详情https://wx.vzan.c…...

静态路由协议实验综合实验

需求&#xff1a; 1、除R5的换回地址已固定外&#xff0c;整个其他所有的网段基于192.168.1.0/24进行合理的IP地址划分。 2、R1-R4每台路由器存在两个环回接口&#xff0c;用于模拟连接PC的网段&#xff1b;地址也在192.168.1.0/24这个网络范围内。 3、R1-R4上不能直接编写到…...

qt MVC软件设计模式

在Qt中使用MVC&#xff08;Model-View-Controller&#xff09;软件设计模式可以帮助你将数据模型、用户界面和控制逻辑有效地分离&#xff0c;从而使得代码更清晰&#xff0c;更易于维护和扩展。以下是在Qt中使用MVC模式的一般思路&#xff1a; Model&#xff08;模型&#xff…...

代码随想录刷题随记15-二叉树回溯

代码随想录刷题随记15-二叉树回溯 110.平衡二叉树 leetcode链接 一棵高度平衡二叉树定义为&#xff1a;一个二叉树每个节点 的左右两个子树的高度差的绝对值不超过1。 求深度和求高度的区别&#xff1a; 求深度可以从上到下去查 所以需要前序遍历&#xff08;中左右&#xff…...

基于SpringBoot Vue养老院管理

一、&#x1f4dd;功能介绍 基于SpringBoot Vue养老院管理 角色&#xff1a;管理员、企业、老人子女、老人 管理员&#xff1a;管理员登录进入养老院管理系统可以对系统首页、个人中心、服务人员管理、老人管理、老人子女管理、老人档案管理、社区活动管理、活动记录管理、床…...

盘点编程方法论中的一些思想

背景 在日常编程开发中&#xff0c;虽然不同公司&#xff0c;业务不同&#xff0c;语言不同&#xff0c;但是工作久了&#xff0c;我们会发现一些编程思想几乎是不变的。这些编程思想&#xff0c;往往来自于大量实际问题场景的方法总结&#xff0c;可以很好的应对某一类问题。如…...

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数&#xff0c;对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

五年级数学知识边界总结思考-下册

目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解&#xff1a;由来、作用与意义**一、知识点核心内容****二、知识点的由来&#xff1a;从生活实践到数学抽象****三、知识的作用&#xff1a;解决实际问题的工具****四、学习的意义&#xff1a;培养核心素养…...

2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张(Windows/Linux)

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况&#xff0c;可以通过以下几种方式模拟或触发&#xff1a; 1. 增加CPU负载 运行大量计算密集型任务&#xff0c;例如&#xff1a; 使用多线程循环执行复杂计算&#xff08;如数学运算、加密解密等&#xff09;。运行图…...

Device Mapper 机制

Device Mapper 机制详解 Device Mapper&#xff08;简称 DM&#xff09;是 Linux 内核中的一套通用块设备映射框架&#xff0c;为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程&#xff0c;并配以详细的…...

技术栈RabbitMq的介绍和使用

目录 1. 什么是消息队列&#xff1f;2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...

Linux 内存管理实战精讲:核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

处理vxe-table 表尾数据是单独一个接口,表格tableData数据更新后,需要点击两下,表尾才是正确的

修改bug思路&#xff1a; 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑&#xff1a;async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...

MFC 抛体运动模拟:常见问题解决与界面美化

在 MFC 中开发抛体运动模拟程序时,我们常遇到 轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵 等问题。本文将针对这些痛点,详细解析原因并提供解决方案,同时兼顾界面美化,让模拟效果更专业、更高效。 问题一:历史轨迹与小球残影残留 现象 小球运动后,历史位置的 “残影”…...

uniapp 字符包含的相关方法

在uniapp中&#xff0c;如果你想检查一个字符串是否包含另一个子字符串&#xff0c;你可以使用JavaScript中的includes()方法或者indexOf()方法。这两种方法都可以达到目的&#xff0c;但它们在处理方式和返回值上有所不同。 使用includes()方法 includes()方法用于判断一个字…...