当前位置: 首页 > news >正文

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函数&#xff0c;用于同步当前设备上的所有CUDA流。它会阻塞调用它的线程&#xff0c;直到所有设备上的CUDA流都执行完为止。这可以确保在进行后续的CUDA操作时&#xff0c;先前的操作已经完成。 在CUDA程序中&#xff0…...

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(扩欧求特解与通解) 题意&#xff1a;给容量分别为A与B的水杯&#xff0c;问确切喝到C水的最小操作次数 有4种操作&#xff1a;选一杯全喝&#xff0c;选一杯全部倒掉&#xff0c;选一杯装满&#xff0c;将一杯的水尽量倒到另一杯中 思路&#xff1a;只有AxByC有解时才能确…...

Diffusion扩散模型学习3——Stable Diffusion结构解析-以图像生成图像(图生图,img2img)为例

Diffusion扩散模型学习3——Stable Diffusion结构解析-以图像生成图像&#xff08;图生图&#xff0c;img2img&#xff09;为例 学习前言源码下载地址网络构建一、什么是Stable Diffusion&#xff08;SD&#xff09;二、Stable Diffusion的组成三、img2img生成流程1、输入图片编…...

LangChain||什么是LangChain? LangChain有什么用?

从Auto-GPT说起&#xff1a; Auto-GPT可以调用本地电脑工具处理复杂信息;Auto-GPT可以围绕目标查阅资 料、“独立思考”、及时反馈、并 及时调整下一步操作…Auto-GPT的诞生&#xff0c;创造了大家 对“将LLM作为智慧大脑来高效 处理综合复杂任务”的想象;首次尝试串联大语言模…...

秋招算法备战第28天 | 93.复原IP地址、78.子集、90.子集II

93. 复原 IP 地址 - 力扣&#xff08;LeetCode&#xff09; 这个问题可以通过深度优先搜索(DFS)的方法来解决。我们要做的就是在字符串的每个可能位置插入点&#xff0c;然后检查生成的每一部分是否在 0-255 的范围内&#xff0c;以及是否没有前导零&#xff08;除非这一部分本…...

Mongodb空间索引的使用以及与Django的对接

Mongodb的空间索引 Mongodb数据库大家都非常熟悉&#xff0c;是一个基于分布式文件存储的开源数据库系统&#xff0c;在高负载的情况下&#xff0c;添加更多的节点&#xff0c;可以保证服务器性能&#xff0c;数据结构由键值(key>value)对组成。MongoDB 文档类似于 JSON 对…...

Windows安装MySQL数据库

MySQL数据库安装 MySQL下载 下载地址&#xff1a;https://dev.mysql.com/downloads/mysql/ 可以选择下载msi或zip&#xff0c;以下为zip模式安装步骤 下载了mysql的zip安装包之后解压即可&#xff1b; Windows安装步骤 初始化MySQL&#xff0c;并记录生成的用户密码root的随机…...

聊聊函数式编程中的“式”

当谈到函数式编程的“式”时&#xff0c;通常指的是函数的组合、转换和应用&#xff0c;以及处理数据的方式和风格。在函数式编程中&#xff0c;式是用来构建程序逻辑的基本单元。 下面更详细解释函数式编程中的几个关键式&#xff1a; 函数的组合&#xff1a; 函数式编程中…...

ubuntu目录分析

在Ubuntu根目录下&#xff0c;以下是一些常见文件夹的含义&#xff1a; /bin&#xff1a;存放可执行文件&#xff0c;包含一些基本的命令和工具。 /boot&#xff1a;存放启动时所需的文件&#xff0c;如内核和引导加载程序。 /dev&#xff1a;包含设备文件&#xff0c;用于与硬…...

Python 进阶(三):正则表达式(re 模块)

❤️ 博客主页&#xff1a;水滴技术 &#x1f338; 订阅专栏&#xff1a;Python 入门核心技术 &#x1f680; 支持水滴&#xff1a;点赞&#x1f44d; 收藏⭐ 留言&#x1f4ac; 文章目录 1. 导入re模块2. re模块中的常用函数2.1 re.search()2.2 re.findall()2.3 re.sub()2.4…...

Vue2 第六节 key的作用与原理

&#xff08;1&#xff09;虚拟DOM &#xff08;2&#xff09;v-for中的key的作用 一.虚拟DOM 1.虚拟DOM就是内存中的数据 2.原生的JS没有虚拟DOM: 如果新的数据和原来的数据有重复数据&#xff0c;不会在原来的基础上新加数据&#xff0c;而是重新生成一份 3. Vue会有虚拟…...

React之组件的生命周期

React之组件的生命周期 一、概述二、整体说明三、挂载阶段四、更新阶段五、卸载阶段 一、概述 生命周期:一个事务从创建到最后消亡经历的整个过程组件的生命周期&#xff1a;组件从被创建到挂载到页面中运行&#xff0c;再到组件不用时卸载的过程意义&#xff1a;理解组件的生…...

linux -网络编程-多线程并发服务器

目录 1.三次握手和四次挥手 2 滑动窗口 3 函数封装思想 4 高并发服务器 学习目标&#xff1a; 掌握三次握手建立连接过程掌握四次握手关闭连接的过程掌握滑动窗口的概念掌握错误处理函数封装实现多进程并发服务器实现多线程并发服务器 1.三次握手和四次挥手 思考: 为什么…...

Golang之路---02 基础语法——字典

字典 字典&#xff08;Map 类型&#xff09;&#xff0c;是由若干个 key:value 这样的键值对映射组合在一起的数据结构。 key 不能是切片&#xff0c;不能是字典&#xff0c;不能是函数。 字典初始化 方式&#xff1a;map[KEY_TYPE]VALUE_TYPE //1.var map1 map[string]int…...

Pytorch(三)

一、经典网络架构图像分类模型 数据预处理部分: 数据增强数据预处理DataLoader模块直接读取batch数据 网络模块设置: 加载预训练模型&#xff0c;torchvision中有很多经典网络架构&#xff0c;可以直接调用注意别人训练好的任务跟咱们的并不完全一样&#xff0c;需要把最后…...

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. 滑动窗口最大值(优先队列 / 单调队列)

题目&#xff1a; 链接&#xff1a;剑指 Offer 59 - I. 滑动窗口的最大值&#xff1b;LeetCode 239. 滑动窗口最大值 难度&#xff1a;困难 下一篇&#xff1a;剑指 Offer 59 - II. 队列的最大值&#xff08;单调队列&#xff09; 给你一个整数数组 nums&#xff0c;有一个大…...

【Linux后端服务器开发】IP协议

目录 一、IP协议概述 二、协议头格式 三、网段划分 四、IP地址的数量限制 五、路由 六、分片和组装 一、IP协议概述 主机&#xff1a;配有IP地址&#xff0c;但是不进行路由控制的设备 路由器&#xff1a;即配有IP地址&#xff0c;又能进行路由控制 节点&#xff1a;主…...

C++ 智能指针陷阱与调试技巧

C智能指针陷阱与调试技巧 在现代C开发中&#xff0c;智能指针是管理动态内存的利器&#xff0c;能有效避免内存泄漏和悬空指针等问题。若使用不当&#xff0c;智能指针本身也可能成为陷阱&#xff0c;导致难以察觉的bug。本文将深入探讨几种常见的智能指针陷阱&#xff0c;并分…...

保姆级教程:用Python脚本一键将Labelme标注数据喂给YOLOv5/v8训练

从Labelme到YOLO&#xff1a;全流程数据转换与训练实战指南 当你完成数百张图像的Labelme标注后&#xff0c;面对满屏的JSON文件&#xff0c;是否曾为如何高效转换为YOLO格式而头疼&#xff1f;本文将以工业级解决方案&#xff0c;带你打通从标注到训练的全链路。不同于简单的格…...

像素剧本圣殿部署指南:Qwen2.5-14B-Instruct在生产环境中稳定运行的GPU显存优化技巧

像素剧本圣殿部署指南&#xff1a;Qwen2.5-14B-Instruct在生产环境中稳定运行的GPU显存优化技巧 1. 项目概述 像素剧本圣殿&#xff08;Pixel Script Temple&#xff09;是一款基于Qwen2.5-14B-Instruct大模型深度微调的专业剧本创作工具。它将先进的AI推理能力与独特的8-Bit…...

基于Spark+Hadoop+Hive大数据技术的产品评价分析系统设计与实现

前言本研究聚焦于设计与实现一种基于大数据技术的产品评价分析系统&#xff0c;通过构建多层架构体系与融合多元技术方法&#xff0c;为企业决策提供智能化支撑。 研究采用分层架构设计理念&#xff0c;将系统划分为数据采集、存储、处理、分析与展示五大模块。数据采集层综合运…...

WAN2.2文生视频开源镜像快速上手:ComfyUI界面操作+SDXL Prompt Styler详解

WAN2.2文生视频开源镜像快速上手&#xff1a;ComfyUI界面操作SDXL Prompt Styler详解 想试试用几句话就让AI帮你生成一段视频吗&#xff1f;WAN2.2文生视频开源镜像&#xff0c;结合了强大的ComfyUI界面和SDXL Prompt Styler风格化工具&#xff0c;让这个过程变得直观又简单。…...

第4章,[标签 Win32] :SysMets3 程序讲解01

专栏导航 上一篇&#xff1a;第4章&#xff0c;[标签 Win32] &#xff1a;SysMets3 程序代码 回到目录 下一篇&#xff1a;第4章&#xff0c;[标签 Win32] &#xff1a;SysMets3 程序讲解02&#xff0c;iVertPos 本节前言 对于本节所讲解的知识&#xff0c;有可能&#xf…...

数谷智能和爱莫科技,非标准数据 AI 定制处理谁更强?

在数字化转型步入“深水区”的今天&#xff0c;企业面临的最大挑战不再是标准化的数据库信息&#xff0c;而是占据企业数据总量 80% 以上的“非标准数据”。这些数据散落在手写单据、非结构化合同、复杂的网页信息、甚至是不规则的工业图像中。如何高效、精准地处理这些非标数据…...

基于PostGIS与SpringBoot构建高性能动态MVT矢量瓦片服务

1. 为什么需要动态矢量瓦片服务 第一次接触矢量瓦片是在2018年做智慧城市项目时&#xff0c;当时前端同事抱怨加载行政区划数据太慢。一个省级行政区划的GeoJSON文件大小超过10MB&#xff0c;每次打开网页都要等半天。后来尝试了Mapbox的矢量瓦片方案&#xff0c;加载速度直接提…...

毕业设计实战:基于SSM+MySQL的税务门户网站设计与实现指南

毕业设计实战&#xff1a;基于SSMMySQL的税务门户网站设计与实现指南 在开发“基于SSMMySQL的税务门户网站”毕业设计时&#xff0c;曾因政策文件收藏表未通过用户ID与政策文件ID双外键关联踩过关键坑——初期仅设计收藏编号、收藏时间等基础字段&#xff0c;未与用户表、政策文…...

事务失效十大场景分析

1. 方法不是 public&#xff08;最经典失效&#xff09; 代码示例 Service public class UserService {Autowiredprivate UserMapper userMapper;// 非 public → 事务失效Transactionalprivate void addUser() {userMapper.insert(new User("张三"));// 模拟异常int…...