Vue中导入并读取Excel数据
在工作中遇到需要前端上传excel文件获取到相应数据处理之后传给后端并且展示上传文件的数据.
一、引入依赖
npm install -S file-saver xlsxnpm install -D script-loadernpm install xlsx
二、在main.js中引入
import XLSX from 'xlsx'
三、创建vue文件
<div><el-uploadclass="upload-demo"action="":on-change="handleChange":on-remove="handleRemove":on-exceed="handleExceed":limit="limitUpload"accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel":auto-upload="false"><!-- 只 能 上 传 xlsx / xls 文 件 --><el-button size="small" type="primary">点击上传</el-button></el-upload><!-- 数据展示 --><el-main><el-table :data="da"><el-table-column prop="code" label="编号"></el-table-column><el-table-column prop="name" label="姓名"></el-table-column><el-table-column prop="pro" label="省份"></el-table-column><el-table-column prop="cit" label="城市"></el-table-column><el-table-column prop="dis" label="区县"></el-table-column></el-table></el-main></div>
四、核心方法
handleChange(file, fileList){this.fileTemp = file.raw;if(this.fileTemp){if((this.fileTemp.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') || (this.fileTemp.type == 'application/vnd.ms-excel')){this.handleExcel(this.fileTemp);} else {this.$message({type:'warning',message:'文件格式错误,请删除后重新上传!'})}} else {this.$message({type:'warning',message:'请上文件!'})}},handleExcel(fileTemp) {let _this = this;this.file = fileTemp;var rABS = false; //是否将文件读取为二进制字符串var f = this.file;var reader = new FileReader();FileReader.prototype.readAsBinaryString = function(f) {var binary = "";var rABS = false; //是否将文件读取为二进制字符串var wb; //读取完成的数据var outdata;var reader = new FileReader();reader.onload = function(e) {var bytes = new Uint8Array(reader.result);var length = bytes.byteLength;for (var i = 0; i < length; i++) {binary += String.fromCharCode(bytes[i]);}var XLSX = require("xlsx");if (rABS) {wb = XLSX.read(btoa(fixdata(binary)), {//手动转化type: "base64"});} else {wb = XLSX.read(binary, {type: "binary"});}outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); //outdata就是你想要的东西console.log('未处理的原始数据如下:');console.log(outdata);//此处可对数据进行处理let arr = [];outdata.map(v => {let obj = {}obj.code = v['code']obj.name = v['name']obj.pro = v['province']obj.cit = v['city']obj.dis = v['district']arr.push(obj)});_this.da=arr;_this.dalen=arr.length;return arr;};reader.readAsArrayBuffer(f);};if (rABS) {reader.readAsArrayBuffer(f);} else {reader.readAsBinaryString(f);}}
结果展示


相关文章:
Vue中导入并读取Excel数据
在工作中遇到需要前端上传excel文件获取到相应数据处理之后传给后端并且展示上传文件的数据. 一、引入依赖 npm install -S file-saver xlsxnpm install -D script-loadernpm install xlsx二、在main.js中引入 import XLSX from xlsx三、创建vue文件 <div><el-uplo…...
CUDA常用函数
cudaDeviceSynchronize cudaDeviceSynchronize是一个CUDA函数,用于同步当前设备上的所有CUDA流。它会阻塞调用它的线程,直到所有设备上的CUDA流都执行完为止。这可以确保在进行后续的CUDA操作时,先前的操作已经完成。 在CUDA程序中࿰…...
72. ElasticSearch常用命令
索引管理 1新建索引 curl -XPUT http://10.42.172.35:9200/index012 读写权限 curl -XPUT -d {"blocks.read":false} http://10.42.172.35:9200/index01/_settings3 查看索引 单个 curl -XGET http://10.42.172.35:9200/index01/_settings多个 curl -XGET http…...
2023.7.26(同余方程的通解与特解)
Water(扩欧求特解与通解) 题意:给容量分别为A与B的水杯,问确切喝到C水的最小操作次数 有4种操作:选一杯全喝,选一杯全部倒掉,选一杯装满,将一杯的水尽量倒到另一杯中 思路:只有AxByC有解时才能确…...
Diffusion扩散模型学习3——Stable Diffusion结构解析-以图像生成图像(图生图,img2img)为例
Diffusion扩散模型学习3——Stable Diffusion结构解析-以图像生成图像(图生图,img2img)为例 学习前言源码下载地址网络构建一、什么是Stable Diffusion(SD)二、Stable Diffusion的组成三、img2img生成流程1、输入图片编…...
LangChain||什么是LangChain? LangChain有什么用?
从Auto-GPT说起: Auto-GPT可以调用本地电脑工具处理复杂信息;Auto-GPT可以围绕目标查阅资 料、“独立思考”、及时反馈、并 及时调整下一步操作…Auto-GPT的诞生,创造了大家 对“将LLM作为智慧大脑来高效 处理综合复杂任务”的想象;首次尝试串联大语言模…...
秋招算法备战第28天 | 93.复原IP地址、78.子集、90.子集II
93. 复原 IP 地址 - 力扣(LeetCode) 这个问题可以通过深度优先搜索(DFS)的方法来解决。我们要做的就是在字符串的每个可能位置插入点,然后检查生成的每一部分是否在 0-255 的范围内,以及是否没有前导零(除非这一部分本…...
Mongodb空间索引的使用以及与Django的对接
Mongodb的空间索引 Mongodb数据库大家都非常熟悉,是一个基于分布式文件存储的开源数据库系统,在高负载的情况下,添加更多的节点,可以保证服务器性能,数据结构由键值(key>value)对组成。MongoDB 文档类似于 JSON 对…...
Windows安装MySQL数据库
MySQL数据库安装 MySQL下载 下载地址:https://dev.mysql.com/downloads/mysql/ 可以选择下载msi或zip,以下为zip模式安装步骤 下载了mysql的zip安装包之后解压即可; Windows安装步骤 初始化MySQL,并记录生成的用户密码root的随机…...
聊聊函数式编程中的“式”
当谈到函数式编程的“式”时,通常指的是函数的组合、转换和应用,以及处理数据的方式和风格。在函数式编程中,式是用来构建程序逻辑的基本单元。 下面更详细解释函数式编程中的几个关键式: 函数的组合: 函数式编程中…...
ubuntu目录分析
在Ubuntu根目录下,以下是一些常见文件夹的含义: /bin:存放可执行文件,包含一些基本的命令和工具。 /boot:存放启动时所需的文件,如内核和引导加载程序。 /dev:包含设备文件,用于与硬…...
Python 进阶(三):正则表达式(re 模块)
❤️ 博客主页:水滴技术 🌸 订阅专栏:Python 入门核心技术 🚀 支持水滴:点赞👍 收藏⭐ 留言💬 文章目录 1. 导入re模块2. re模块中的常用函数2.1 re.search()2.2 re.findall()2.3 re.sub()2.4…...
Vue2 第六节 key的作用与原理
(1)虚拟DOM (2)v-for中的key的作用 一.虚拟DOM 1.虚拟DOM就是内存中的数据 2.原生的JS没有虚拟DOM: 如果新的数据和原来的数据有重复数据,不会在原来的基础上新加数据,而是重新生成一份 3. Vue会有虚拟…...
React之组件的生命周期
React之组件的生命周期 一、概述二、整体说明三、挂载阶段四、更新阶段五、卸载阶段 一、概述 生命周期:一个事务从创建到最后消亡经历的整个过程组件的生命周期:组件从被创建到挂载到页面中运行,再到组件不用时卸载的过程意义:理解组件的生…...
linux -网络编程-多线程并发服务器
目录 1.三次握手和四次挥手 2 滑动窗口 3 函数封装思想 4 高并发服务器 学习目标: 掌握三次握手建立连接过程掌握四次握手关闭连接的过程掌握滑动窗口的概念掌握错误处理函数封装实现多进程并发服务器实现多线程并发服务器 1.三次握手和四次挥手 思考: 为什么…...
Golang之路---02 基础语法——字典
字典 字典(Map 类型),是由若干个 key:value 这样的键值对映射组合在一起的数据结构。 key 不能是切片,不能是字典,不能是函数。 字典初始化 方式:map[KEY_TYPE]VALUE_TYPE //1.var map1 map[string]int…...
Pytorch(三)
一、经典网络架构图像分类模型 数据预处理部分: 数据增强数据预处理DataLoader模块直接读取batch数据 网络模块设置: 加载预训练模型,torchvision中有很多经典网络架构,可以直接调用注意别人训练好的任务跟咱们的并不完全一样,需要把最后…...
Linux——进程控制
目录 1. 进程创建 1.1 fork函数 1.2 fork系统调用内部宏观流程 1.3 fork后子进程执行位置分析 1.4 fork后共享代码分析 1.5 fork返回值 1.6 写时拷贝 1.7 fork常规用法 1.8 fork调用失败的原因 2.进程终止 2.1 进程退出场景 2.2 strerror函数—返回描述错误号的字符…...
剑指 Offer 59 - I. 滑动窗口的最大值 / LeetCode 239. 滑动窗口最大值(优先队列 / 单调队列)
题目: 链接:剑指 Offer 59 - I. 滑动窗口的最大值;LeetCode 239. 滑动窗口最大值 难度:困难 下一篇:剑指 Offer 59 - II. 队列的最大值(单调队列) 给你一个整数数组 nums,有一个大…...
【Linux后端服务器开发】IP协议
目录 一、IP协议概述 二、协议头格式 三、网段划分 四、IP地址的数量限制 五、路由 六、分片和组装 一、IP协议概述 主机:配有IP地址,但是不进行路由控制的设备 路由器:即配有IP地址,又能进行路由控制 节点:主…...
3步掌控《缺氧》存档:用Oni-Duplicity打造理想殖民地
3步掌控《缺氧》存档:用Oni-Duplicity打造理想殖民地 【免费下载链接】oni-duplicity A web-hosted, locally-running save editor for Oxygen Not Included. 项目地址: https://gitcode.com/gh_mirrors/on/oni-duplicity 你是否曾因《缺氧》中复制人负面特质…...
别再手动查ID了!用R包一键搞定单细胞Marker基因ID转换(附org.Hs.eg.db实战)
单细胞Marker基因ID转换实战:用org.Hs.eg.db实现高效精准映射 刚完成单细胞聚类分析的研究者,常常会面临一个看似简单却极其耗时的任务——将Marker基因的Symbol标识转换为标准的Entrez ID。这个步骤虽然基础,却直接影响后续GO富集分析的可靠…...
GLM-4-9B-Chat-1M模型推理加速方案
GLM-4-9B-Chat-1M模型推理加速方案 1. 引言 如果你正在使用GLM-4-9B-Chat-1M这个支持百万级上下文的大模型,可能会发现推理速度有时候不太理想。特别是在处理长文本时,生成响应需要等待较长时间。这其实是很正常的现象,毕竟模型参数量达到9…...
果实采摘机械手的设计【论文+CAD图纸+Creo三维+外文文献翻译】
果实采摘机械手作为现代农业装备领域的重要创新,其核心作用在于解决传统人工采摘效率低、劳动强度大、成本高等问题。通过机械结构与控制系统的协同设计,该设备可模拟人手抓取动作,精准完成果实识别、定位、采摘及收集全流程,显著…...
即插即用系列 | TGRS 2026 | CGTA:曲率引导标记注意力!线性复杂度全局建模,几何结构保真与长程关联双突破 | 代码分享
0. 前言 本文介绍了CGTA曲率引导标记注意力模块,其通过曲率感知的标记选择策略与全局稀疏注意力机制,首次在遥感图像超分辨率领域实现对细长曲线结构与重复纹理的高保真重建,有效破解了传统注意力机制在处理曲线拓扑时容易产生锯齿边缘与结构…...
Rust实战:通过DLL注入与IAT Hook技术拦截Windows API调用
1. 为什么需要Hook Windows API? 在Windows系统开发中,Hook技术就像给系统功能安装了一个"监听器"。想象一下,当你点击某个按钮时,原本应该弹出标准对话框,但通过Hook技术,我们可以在这个动作发生…...
5G RedCap路由器如何选?关键特性解析与典型应用场景指南
1. 5G RedCap路由器选购的核心指标 第一次接触5G RedCap路由器时,我被参数表里密密麻麻的术语搞得头晕眼花。后来在工业现场实测了7款不同型号后,才发现真正影响使用体验的关键指标其实就这几个: 频段支持就像路由器的"语言能力"。…...
IP被封禁?5招快速恢复访问权限
使用网站或平台时,如果你突然遇到“Your IP has been banned(您的IP已被封禁)”的提示,通常意味着该平台已经限制了你当前网络的访问权限。很多人第一反应是账号出问题,但实际上,IP封禁针对的是网络环境&am…...
Ubuntu系统优化下的LiuJuan20260223Zimage高性能部署
Ubuntu系统优化下的LiuJuan20260223Zimage高性能部署 本文基于Ubuntu 22.04 LTS系统测试,适用于NVIDIA GPU环境 1. 环境准备与系统优化 在开始部署LiuJuan20260223Zimage之前,我们先对Ubuntu系统进行一些基础优化,这些调整能让后续的模型运行…...
2026年探访阎良:这三家头疗肩颈养生馆的服务为何备受好评?
在快节奏的现代生活中,头颈肩的亚健康问题几乎成了都市人的“标配”。头痛、失眠、肩颈僵硬,这些困扰背后,是人们对专业、有效且放松的养生服务的迫切需求。近期,笔者深入西安市阎良区,实地探访了三家在本地口碑颇佳的…...
