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地址,又能进行路由控制 节点:主…...
Vim 调用外部命令学习笔记
Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...
Lombok 的 @Data 注解失效,未生成 getter/setter 方法引发的HTTP 406 错误
HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误,它们的含义、原因和解决方法都有显著区别。以下是详细对比: 1. HTTP 406 (Not Acceptable) 含义: 客户端请求的内容类型与服务器支持的内容类型不匹…...
51c自动驾驶~合集58
我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留,CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制(CCA-Attention),…...
进程地址空间(比特课总结)
一、进程地址空间 1. 环境变量 1 )⽤户级环境变量与系统级环境变量 全局属性:环境变量具有全局属性,会被⼦进程继承。例如当bash启动⼦进程时,环 境变量会⾃动传递给⼦进程。 本地变量限制:本地变量只在当前进程(ba…...
visual studio 2022更改主题为深色
visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中,选择 环境 -> 常规 ,将其中的颜色主题改成深色 点击确定,更改完成...
关于nvm与node.js
1 安装nvm 安装过程中手动修改 nvm的安装路径, 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解,但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后,通常在该文件中会出现以下配置&…...
【机器视觉】单目测距——运动结构恢复
ps:图是随便找的,为了凑个封面 前言 在前面对光流法进行进一步改进,希望将2D光流推广至3D场景流时,发现2D转3D过程中存在尺度歧义问题,需要补全摄像头拍摄图像中缺失的深度信息,否则解空间不收敛…...
屋顶变身“发电站” ,中天合创屋面分布式光伏发电项目顺利并网!
5月28日,中天合创屋面分布式光伏发电项目顺利并网发电,该项目位于内蒙古自治区鄂尔多斯市乌审旗,项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站,总装机容量为9.96MWp。 项目投运后,每年可节约标煤3670…...
unix/linux,sudo,其发展历程详细时间线、由来、历史背景
sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...
零基础设计模式——行为型模式 - 责任链模式
第四部分:行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习!行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想:使多个对象都有机会处…...
