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数据。

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

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

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

相关文章

在pytorch中,读取GPU上张量的数值 (数据从GPU到CPU) 的几种常用方法

1、.cpu() 方法&#xff1a; 使用 .cpu() 方法可以将张量从 GPU 移动到 CPU。这是一种简便的方法&#xff0c;常用于在进行 CPU 上的操作之前将数据从 GPU 取回 import torch# 在 GPU 上创建一个张量 gpu_tensor torch.tensor([1, 2, 3], devicecuda)# 将 GPU 上的张…

AI赋能金融创新:技术驱动的未来金融革命

人工智能&#xff08;AI&#xff09;作为一种技术手段&#xff0c;正逐渐改变金融行业的方方面面。从风险管理到客户体验&#xff0c;从交易执行到反欺诈&#xff0c;AI带来了许多创新和机遇。本文将探讨AI在金融领域的应用和其赋能的金融创新。 金融领域一直以来都面临着复杂的…

QT UI自动化测试(1)

一、框架选择 想结合公司产品搭建一套自动化测试框架&#xff0c;一方面自己学习用&#xff0c;一方面也希望跟公司业务结合起来&#xff0c;双赢。公司软件最多的产品是部署在Linux系统上&#xff0c;基于QT QML开发的UI&#xff0c;本来奔着免费的自动化框架去的&#xff0c;…

编写html的vscode快捷键

一快速生成 按住!(英文的)&#xff0c;回车。 二快捷键 1.代码格式化 用来对齐标签。整理代码&#xff0c;强迫症患者必备。 shiftaltf 2.快速移动一行 altdown altup 向上或向下移动一行 3.快速复制一行代码 ShiftAltUp ShiftAltDown 4.快速保存 Ctrl S 5.快速查…

ViT的极简pytorch实现及其即插即用

先放一张ViT的网络图 可以看到是把图像分割成小块&#xff0c;像NLP的句子那样按顺序进入transformer&#xff0c;经过MLP后&#xff0c;输出类别。每个小块是16x16&#xff0c;进入Linear Projection of Flattened Patches, 在每个的开头加上cls token和位置信息&#xff0c;…

C++项目之酒店客房管理系统架构——设计模式应用场景详解(上)

在C++酒店客房管理系统中,可以使用以下设计模式来架构程序: 1. 单例模式(Singleton Pattern):用于确保系统中只有一个客房管理系统实例。这样可以确保整个系统中只有一个唯一的实例,方便管理和控制。 通过私有的构造函数和静态的getInstance方法来控制实例的创建。getI…

Mysql5.7主从数据库同步失败(日记文件错误)解决记录

记录一次Mysql主从数据库同步失败(日记文件错误)解决记录 查看同步状态&#xff1a; 具体错误&#xff1a; 检查mysql数据库日记 2021-06-10T03:45:43.522398Z 1 [ERROR] Error reading packet from server for channel : event read from binlog did not pass crc check; the…

Oracle 拼接字符串

语法 使用||拼接如果内容中有单引号&#xff0c;则可在该单引号前面再加一个单引号进行转义 例子 比如有一个业务是根据需要生成多条插入语句 select insert into des_account_des_role(des_account_id, roles_id) values( || id || , || (select id from des_role where wo…

Ps:八大混合模式及其在色彩渲染上的运用

在所有的图层混合模式中&#xff0c;有八种比较特别。 特别之处在于&#xff0c;其它的混合模式在修改图层的“不透明度”或“填充”时&#xff0c;效果是一样的。 而这八种混合模式使用“填充”比使用“不透明度”可带来更好的效果&#xff0c;有时甚至可以说是惊艳。 提示&am…

ubuntu下编译obs-studio遇到的问题记录

参考的是这篇文档&#xff1a;Build Instructions For Linux obsproject/obs-studio Wiki GitHub 在安装OBS dependencies时&#xff0c; sudo apt install libavcodec-dev libavdevice-dev libavfilter-dev libavformat-dev libavutil-dev libswresample-dev libswscale-d…

[ 云计算 | AWS ] 对比分析:Amazon SNS 与 SQS 消息服务的异同与选择

文章目录 一、前言二、Amazon SNS 服务&#xff08;Amazon Simple Notification Service&#xff09;三、Amazon SQS 服务&#xff08;Amazon Simple Queue Service&#xff09;四、SNS 与 SQS 的区别&#xff08;本文重点&#xff09;4.1 基于推送和轮询区别4.2 消费者数量对应…

HBuilder常用的快捷键

查看专栏目录 Network 灰鸽宝典专栏主要关注服务器的配置&#xff0c;前后端开发环境的配置&#xff0c;编辑器的配置&#xff0c;网络服务的配置&#xff0c;网络命令的应用与配置&#xff0c;windows常见问题的解决等。 文章目录 常用快捷键分9项快捷键1.文件(4)2.编辑(13)3.…

网络安全应急响应工具之-流量安全取证NetworkMiner

在前面的一些文章中&#xff0c;用了很多的章节介绍流量分析和捕获工具wireshark。Wireshark是一款通用的网络协议分析工具&#xff0c;非常强大&#xff0c;关于wireshark的更多介绍&#xff0c;请关注专栏&#xff0c;wireshark从入门到精通。本文将介绍一个专注于网络流量取…

计算机网络【DHCP动态主机配置协议】

DHCP 出现 电脑或手机需要 IP 地址才能上网。大刘有两台电脑和两台手机&#xff0c;小美有一台笔记本电脑、一台平板电脑和两台手机&#xff0c;老王、阿丽、敏敏也有几台终端设备。如果为每台设备手动配置 IP 地址&#xff0c;那会非常繁琐&#xff0c;一点儿也不方便。特别是…

华为OD机试 - 路口最短时间问题(Java JS Python C)

题目描述 假定街道是棋盘型的,每格距离相等,车辆通过每格街道需要时间均为 timePerRoad; 街道的街口(交叉点)有交通灯,灯的周期 T(=lights[row][col])各不相同; 车辆可直行、左转和右转,其中直行和左转需要等相应 T 时间的交通灯才可通行,右转无需等待。 现给出…

k8s:kubernets

自动部署、自动扩展和管理的容器化部署的应用程序的一个开源系统 k8s负责自动化运维管理多个容器化程序的集群&#xff0c;是一个功能强大的容器编排工具 可以以分布式和集群化的方式进行容器管理 1.18版本&#xff0c;目前最多的是1.20版本&#xff0c;最新的是1.29版本&am…

Java IDEA JUnit 单元测试

JUnit是一个开源的 Java 单元测试框架&#xff0c;它使得组织和运行测试代码变得非常简单&#xff0c;利用JUnit可以轻松地编写和执行单元测试&#xff0c;并且可以清楚地看到哪些测试成功&#xff0c;哪些失败 JUnit 还提供了生成测试报告的功能&#xff0c;报告不仅包含测试…

什么是PD快充诱骗芯片?它的原理是什么?

PD快充诱骗芯片&#xff0c;顾名思义&#xff0c;就是通过LDR6328Q PD取电芯片把pd适配器的电压给诱骗出来固定给后端设备供电。 PD诱骗芯片是受电端的一种PD协议芯片&#xff0c;它内置了PD通讯模块&#xff0c;通过与供电端&#xff08;如PD充电器&#xff09;的PD协议芯片握…

SpringCloud实战之Feign 2.x 迁移到 4.x

从官方文档中去发现变化的点&#xff1a; 官方关于Okhttp from 3.x to 4.x 官方关于Spring-cloudfeign from 2.2.x 官方关于Spring-cloudfeign from 4.1.x spring-cloud-openfeign 变化对比 如何引入feign?如何加载feign?如何申明一个client&#xff1f;关于load-balancer关…

Ubuntu 安装MySQL以及基本使用

前言 MySQL是一个开源数据库管理系统&#xff0c;通常作为流行的LAMP&#xff08;Linux&#xff0c;Apache&#xff0c;MySQL&#xff0c;PHP / Python / Perl&#xff09;堆栈的一部分安装。它使用关系数据库和SQL&#xff08;结构化查询语言&#xff09;来管理其数据。 安装…