vue3 导入excel数据

所需包

"xlsx": "^0.18.5"

页面导入包

import * as XLSX from 'xlsx';
import {genFileId,  UploadProps, UploadRawFile,ElTable } from 'element-plus';

页面

	<el-upload  accept=".xlsx" :on-change="changeExcel" :on-exceed="handleExceed" :limit="1" :auto-upload="false" :show-file-list="false"  ref="upload"><el-button type="primary" size="default">导入Excel</el-button></el-upload>//js
let tableData=ref([])
const upload = ref<InstanceType<typeof ElTable>>();
const handleExceed: UploadProps['onExceed'] = (files) => {upload.value!.clearFiles();const file = files[0] as UploadRawFile;file.uid = genFileId();upload.value!.handleStart(file);
};function changeExcel(e, fileList) {console.log('changeExcelProject---------->');if (fileList.length > 1) {fileList.splice(0, 1);}const files = e.raw;console.log('files------>', files);// 读取表格const fileReader = new FileReader();fileReader.onload = (ev) => {const workbook = XLSX.read(ev.target.result, {type: 'binary',});const wsname = workbook.SheetNames[0];const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname], {defval: '',});console.log('ws=', ws); // 转换成json的数据//可以选择构建列let columnsproject = [];if (ws && ws.length > 0) {const obj = ws[0] as Object;for (const key in obj) {if (obj.hasOwnProperty(key)) {columnsproject.push({label: key,prop: key,});}}}tableDataproject.value = [...ws];fieldMap.set('姓名', 'name');fieldMap.set('年龄', 'age');fieldMap.set('性别', 'sex');let	tableDataArr = [...ws];let dataNew: any[] = [];for (let i = 0; i < tableDataArr.length; i++) {const item = tableDataArr[i];const obj: any = buildingObj(item);dataNew.push(obj);}tableData.value=dataNewconsole.error("tableData",tableData)};fileReader.readAsBinaryString(files);
}function buildingObj(item: object) {const obj = {};for (const [key, value] of fieldMap) {obj[value] = item[key];}return obj;
}

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

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

相关文章

[StartingPoint][Tier2]Included

LXD https://www.hackingarticles.in/lxd-privilege-escalation/ Task 1 What service is running on the target machine over UDP? &#xff08;目标机器上通过UDP运行的服务是什么&#xff1f;&#xff09; $ nmap -sU 10.129.232.86 -p 69 tftp Task 2 What class o…

DRF多表关联的序列化和反序列化

DRF多表关联的序列化和反序列化 目录 DRF多表关联的序列化和反序列化序列化定制字段source一对多的序列化 多表关联的序列化方式1&#xff1a;在表模型中定义方法方式2&#xff1a;定制返回格式SerializerMethodField方式3&#xff1a;子序列化 多表关联的反序列化反序列化保存…

Linux【实战篇】—— NFS服务搭建与配置

目录 一、介绍 1.1什么是NFS&#xff1f; 1.2客户端与服务端之间的NFS如何进行数据传输&#xff1f; 1.3RPC和NFS的启动顺序 1.4NFS服务 系统守护进程 二、安装NFS服务端 2.1安装NFS服务 2.2 创建共享目录 2.3创建共享目录首页文件 2.4关闭防火墙 2.5启动NFS服务 2.…

秋叶Stable diffusion的创世工具安装-带安装包链接

来自B站up秋葉aaaki&#xff0c;近期发布了Stable Diffusion整合包v4.7版本&#xff0c;一键在本地部署Stable Diffusion&#xff01;&#xff01; 适用于零基础想要使用AI绘画的小伙伴~本整合包支持SDXL&#xff0c;预装多种必须模型。无需安装git、python、cuda等任何内容&am…

day9 | 栈与队列 part-1 (Go) | 232 用栈实现队列、225 用队列实现栈

今日任务 栈与队列的理论基础 (介绍:代码随想录)232 用栈实现队列(题目: . - 力扣&#xff08;LeetCode&#xff09;)225 用队列实现栈 (题目: . - 力扣&#xff08;LeetCode&#xff09; ) 栈与队列的理论基础 栈 : 先进后出 队列: 后进先出 老师给的讲解:代码随想录 …

记一次centos合并excel,word,png,pdf为一个整体pdf的入坑爬坑过程(一直显示宋体问题)。

一、背景 原先已经简单实现了excel,word,png,pdf合成一个整体pdf的过程。并将它弄到docker容器中。 1、原先入坑的技术栈 php:7.4 (业务有涉及)php第三方包 setasign\Fpdi\Fpdi : 2.3.6 &#xff08;pdf合并&#xff09;libreoffice : 5.3.6.1ImageMagick: 6.9.10-68 2、…

JS-PC/MOBILE技巧--MOBILE

二、移动端网页特效 1、触屏事件 触摸事件概述 常见的触屏事件&#xff1a; 触屏touch事件说明touchstart手指触摸到一个 DOM 元素是触发touchmove手指在一个 DOM 元素上滑动时触发touchend手指从一个 DOM 元素上移开时触发 示例&#xff1a; <!DOCTYPE html> <html…

本地PC安装eNSP Pro完成简单的WLAN实验

前言 上个月底华为更新一版eNSP Pro&#xff0c;新增了AC、AP、STA等设备&#xff0c;也就是说可以在eNSP中进行WLAN相关的实验了。之前写过一篇文章《将eNSP Pro部署在华为云是什么体验》介绍了怎么在华为云上部署eNSP Pro&#xff0c;这次使用本地PC机在虚拟机中安装eNSP Pr…

RF测试笔记:三阶交调失真概述及测试

1. 交调失真会带来哪些影响&#xff1f; 无线通信系统中&#xff0c;交调失真不仅会影响发射链路的性能&#xff0c;还会影响接收链路的性能。 对于发射链路&#xff0c;非线性最严重的部件非功率放大器莫属&#xff0c;当信号为宽带调制信号时&#xff0c;无论是在信号带宽内…

13 Php学习:面向对象

PHP 面向对象 面向对象&#xff08;Object-Oriented&#xff0c;简称 OO&#xff09;是一种编程思想和方法&#xff0c;它将程序中的数据和操作数据的方法封装在一起&#xff0c;形成"对象"&#xff0c;并通过对象之间的交互和消息传递来完成程序的功能。面向对象编…

基于springboot的电影评论网站系统源码数据库

基于springboot的电影评论网站系统源码数据库 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步成熟。本文介绍了电影评论网站的开发全过程。通过分析电影评论网站管理的不足&#xff0c;创建了一个计算机管理电影评论网站的方案。文…

基于Python的深度学习的中文情感分析系统(V2.0),附源码

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

【STL详解 —— list的介绍及使用】

STL详解 —— list的介绍及使用 list的介绍list的介绍使用list的构造list iterator的使用list capacitylist element accesslist modifiers 示例list的迭代器失效 list的介绍 list是可以在常数范围内在任意位置进行插入和删除的序列式容器&#xff0c;并且该容器可以前后双向迭…

基于Docker构建CI/CD工具链(八)用nginx收集测试报告

当前&#xff0c;我们已经介绍了如何使用 Apifox 和 JMeter 进行测试&#xff0c;尽管控制台已经输出了测试结果&#xff0c;但在实际工作中&#xff0c;我们通常需要更详细的测试报告。 测试报告在测试过程中已经生成&#xff0c;只需将其托管起来以便查阅。如果你有现成的 C…

链表linked list: 将新节点插入到了链表的开头

这段代码实现了在链表的开头插入新节点的功能。让我解释一下它的逻辑&#xff1a; 首先&#xff0c;它创建了一个新的节点 newNode。然后&#xff0c;将新节点的数据域设置为 newData&#xff0c;即要插入的新数据。接着&#xff0c;将新节点的指针域 next 指向当前的头节点 h…

C++11 设计模式4. 抽象工厂(Abstract Factory)模式

问题的提出 从前面我们已经使用了工厂方法模式 解决了一些问题。 现在 策划又提出了新的需求&#xff1a;对于各个怪物&#xff0c;在不同的场景下&#xff0c;怪物的面板数值会发生变化&#xff0c; //怪物分类&#xff1a;亡灵类&#xff0c;元素类&#xff0c;机械类 …

skynet 使用protobuf

一、安装protobuf 下面的操作方法都是在 centos 环境下操作 #下载 Protocol Buffers 源代码&#xff1a; #您可以从 Protocol Buffers 的 GitHub 仓库中获取特定版本的源代码。使用以下命令克隆仓库 git clone -b v3.20.3 https://github.com/protocolbuffers/protobuf.git#编译…

MATLAB 自定义实现点云法向量和曲率计算(详细解读)(64)

MATLAB 自定义实现点云法向量和曲率计算(详细解读)(64) 一、算法介绍二、算法步骤三、算法实现1.代码 (完整,注释清晰,可直接用)2.结果一、算法介绍 首先说明: ------这里代码手动实现,不调用matlab提供的法向量计算接口,更有助于大家了解法向量和曲率的计算方法,…

docker部署Prometheus+AlertManager实现邮件告警

文章目录 一、环境准备1、硬件准备&#xff08;虚拟机&#xff09;2、关闭防火墙&#xff0c;selinux3、所有主机安装docker 二、配置Prometheus1、docker启动Prometheus 三、添加监控节点1、docker启动node-exporter 四、Prometheus配置node-exporter1、修改prometheus.yml配置…

【架构-11】SOA和微服务?

什么是SOA&#xff1f; SOA是面向服务的架构&#xff0c;是一种软件架构模式&#xff0c;旨在通过将应用程序拆分成可重用的服务来提高应用程序的灵活性、可维护性和可扩展性。它将应用程序的不同功能单元&#xff08;称为服务&#xff09;通过这些服务之间良好的接口联系起来…