当前位置: 首页 > 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;可以很好的应对某一类问题。如…...

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块&#xff0c;它提供了一个轻量级的 HTTP 服务器实现&#xff0c;主要用于构建基于 HTTP 的应用程序和服务。 功能介绍&#xff1a; 主要功能 HTTP服务器功能&#xff1a; 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

PL0语法,分析器实现!

简介 PL/0 是一种简单的编程语言,通常用于教学编译原理。它的语法结构清晰,功能包括常量定义、变量声明、过程(子程序)定义以及基本的控制结构(如条件语句和循环语句)。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言,由 Niklaus Wirth 设计,用于展示编译原理的核…...

Android 之 kotlin 语言学习笔记三(Kotlin-Java 互操作)

参考官方文档&#xff1a;https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java&#xff08;供 Kotlin 使用&#xff09; 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

以光量子为例,详解量子获取方式

光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学&#xff08;silicon photonics&#xff09;的光波导&#xff08;optical waveguide&#xff09;芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中&#xff0c;光既是波又是粒子。光子本…...

#Uniapp篇:chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

Docker 本地安装 mysql 数据库

Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker &#xff1b;并安装。 基础操作不再赘述。 打开 macOS 终端&#xff0c;开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...