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

vue 本地上传Excel文件并读取内容

陌路遇见,陌路告别,陌路问好,九月再见,十月重现!

首先我来讲解一下我的思路:

  1. 首先,在模板部分,我们有以下元素:
    <input type=“file” @change=“handleFileUpload” accept=“.xlsx, .xls” />: 这是一个文件输入元素,允许用户选择Excel文件以进行上传。当文件选择发生变化时,@change绑定了handleFileUpload方法,以处理文件上传事件,并且accept属性指定了只允许选择具有.xlsx或.xls扩展名的文件。

  2. 在Vue实例的data属性中,我们定义了excelData数组,它将用于存储Excel文件的内容。

  3. 在methods部分,我们定义了一个名为handleFileUpload的方法,该方法用于处理文件上传事件。当用户选择一个Excel文件并触发@change事件时,此方法会执行以下操作:
    a. 获取上传的文件对象。
    b. 创建一个新的FileReader对象。
    c. 设置reader.onload回调,该回调会在文件读取完成后执行。在此回调中,我们将解析Excel文件的内容。
    d. 使用XLSX库的XLSX.read方法,解析文件数据,并获取工作表的内容。然后,我们将工作表的数据转换为JavaScript对象数组,将其存储在excelData属性中。

废话不多说,接下来上代码:

在这里插入图片描述

代码中有详细解说

<template><div><input type="file" @change="handleFileUpload" accept=".xlsx, .xls"/><div id="excelData"><table v-if="excelData.length"><!--        <thead>--><!--        <tr>--><!--          <th v-for="(header, index) in excelData[0]" :key="index">{{ index }}</th>--><!--        </tr>--><!--        </thead>--><tbody><tr v-for="(row, rowIndex) in excelData" :key="rowIndex"><td v-for="(cell, cellIndex) in row" :key="cellIndex"><p v-if="rowIndex!=0&&rowIndex!=1">{{ cell }}</p></td></tr></tbody></table></div></div>
</template><script>
import * as XLSX from 'xlsx'   // npm install xlsx --save 安装命名export default {name: 'Excel',data () {return {excelData: [],}},methods: {handleFileUpload (event) {const file = event.target.files[0]  //获取上传的文件if (file) {const reader = new FileReader() //创建FileReader对象,说明:它通常用于处理本地文件的读取操作,例如读取文本文件、图像文件、或像前面示例中的Excel文件一样的二进制文件reader.onload = (event) => {   // 设置事件监听器const data = event.target.result/*使用XLSX库的XLSX.read方法解析文件数据'array'(默认值): 这是最常见的类型。它用于读取二进制数据数组,通常是通过 FileReader 读取的文件数据。这是用于读取二进制格式文件,如 Excel 文件的一种常见类型。'binary': 用于读取二进制字符串。这可以用于将二进制数据传递为二进制字符串。'base64': 用于读取 base64 编码的数据。如果你有一个 base64 编码的文件内容,你可以使用这个类型来读取它。'buffer': 用于 Node.js 环境,可以读取 Node.js Buffer 对象中的数据。'file': 用于在浏览器中直接读取文件对象。这个选项通常用于读取用户选择的文件而不需要先通过 FileReader 将其读取为数组。不同的 type 选项允许你根据数据的来源和格式来选择适当的类型,以便 XLSX 库能够正确解析数据。在大多数情况下,使用 'array' 是最常见的,因为它适用于通过 FileReader 读取的文件数据,这是处理文件上传的典型用例。* */const workbook = XLSX.read(data, { type: 'array' })const firstSheetName = workbook.SheetNames[0]const worksheet = workbook.Sheets[firstSheetName]this.excelData = XLSX.utils.sheet_to_json(worksheet)}reader.readAsArrayBuffer(file)}}}
}
</script><style scoped></style>

最后我想说:给自己一点轻松,给自己一点快乐,忙里偷闲去着意品味一下生活的乐趣吧。

相关文章:

vue 本地上传Excel文件并读取内容

陌路遇见&#xff0c;陌路告别&#xff0c;陌路问好&#xff0c;九月再见&#xff0c;十月重现! 首先我来讲解一下我的思路&#xff1a; 首先&#xff0c;在模板部分&#xff0c;我们有以下元素&#xff1a; <input type“file” change“handleFileUpload” accept“.xlsx…...

京东商品品牌数据采集接口,京东商品详情数据接口,京东API接口

采集京东商品品牌数据的方法如下&#xff1a; 打开网页。在首页【输入框】中输入目标网址批量输入多个关键词并搜索。创建【循环列表】&#xff0c;采集所有商品列表中的数据。编辑字段。创建【循环翻页】&#xff0c;采集多页数据。设置滚动和修改【循环翻页】XPath。启动采集…...

电脑提示Explorer.exe系统错误该怎么办?

平时我们在使用电脑时&#xff0c;系统有时会提示Explorer.exe系统错误&#xff0c;很多用户在遇到这类问题时不知道该怎么办。遇到Explorer.exe系统错误&#xff0c;该怎么办呢&#xff1f;下面我们一起来了解一下。 怎么修复Explorer.exe系统错误&#xff1f; Explorer.exe是…...

Java架构师部署架构设计

目录 1 导学2 部署架构设计和部署架构图2.1 服务器数量和配置2.2 服务器软件配置2.3 网络环境设计2.4 部署架构图2.5 部署说明文档2.6 部署清单2.7 画部署架构图3 实战整体部署架构设计4 节点部署说明列表5 总结1 导学 本章的主要内容是整体架构设计的核心之一,部署架构设计相…...

ubuntu 22.04.3 live server图文安装流程

备注&#xff1a;以下操作全用键盘&#xff0c;tab切换&#xff0c;enter确认&#xff0c;方向键移动&#xff1b; 1、 选择安装&#xff0c;第一个&#xff1b; 2、选择语言&#xff0c;这里只能选择英语&#xff0c;无中文&#xff1b; 3、继续而不更新 4、键盘&#xff0c;…...

基于SVM+TensorFlow+Django的酒店评论打分智能推荐系统——机器学习算法应用(含python工程源码)+数据集+模型(一)

目录 前言总体设计系统整体结构图系统流程图 运行环境Python环境TensorFlow 环境方法一方法二 安装其他模块安装MySQL 数据库 模块实现1. 数据预处理1&#xff09;数据整合2&#xff09;文本清洗3&#xff09;文本分词 相关其它博客工程源代码下载其它资料下载 前言 本项目以支…...

Elasticsearch 分片内部原理—近实时搜索、持久化变更

目录 一、近实时搜索 refresh API 二、持久化变更 flush API 一、近实时搜索 随着按段&#xff08;per-segment&#xff09;搜索的发展&#xff0c;一个新的文档从索引到可被搜索的延迟显著降低了。新文档在几分钟之内即可被检索&#xff0c;但这样还是不够快。 磁盘在这…...

华为OD机试 - 用连续自然数之和来表达整数 - 滑动窗口(Java 2023 B卷 100分)

目录 专栏导读一、题目描述二、输入描述三、输出描述四、解题思路五、Java算法源码六、效果展示1、输入2、输出 华为OD机试 2023B卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;A卷B卷&#xff09;》…...

玩转ChatGPT:图像识别(vol. 1)

一、写在前面 来了来了&#xff0c;终于给我的账号开放图像识别功能了&#xff0c;话不多说&#xff0c;直接开测&#xff01;&#xff01;&#xff01; 二、开始尝鲜 &#xff08;1&#xff09;咒语&#xff1a; GPT回复&#xff1a; 这幅图显示了从2005年1月到2012年12月的…...

oracle 数据库实验三

&#xff08;1&#xff09;向 ORCL数据库添加一个重做日志文件组&#xff08;组号为5&#xff09;&#xff0c;包含一个成员文件d:\redo05a.log,大小为4MB &#xff1b; 要向Oracle数据库添加一个重做日志文件组&#xff0c;您可以执行以下步骤&#xff1a; 连接到数据库&…...

多线程并发篇---第五篇

系列文章目录 文章目录 系列文章目录一、什么是线程安全二、Thread类中的yield方法有什么作用?三、Java线程池中submit() 和 execute()方法有什么区别?一、什么是线程安全 线程安全就是说多线程访问同一段代码,不会产生不确定的结果。 又是一个理论的问题,各式各样的答案有…...

java实现权重随机获取值或对象

文章目录 场景TreeMap.tailMap方法简单分析使用随机值使用treemap实现权重取值将Int改为Double稍微准确一点,因为double随机的值更加多测试main方法 当权重的参数比较多,那么建议使用hutool封装的 场景 按照权重2,8给用户分组为A,B, TreeMap.tailMap方法 treeMap是一种基于红…...

期权账户怎么开通的?佣金最低多少?

场内期权的合约由交易所统一标准化定制&#xff0c;大家面对的同一个合约对应的价格都是一致的&#xff0c;比较公开透明。期权开户当天不能交易的&#xff0c;期权开户需要满足20日日均50万及半年交易经验即可操作。 个人投资者想要交易期权首先就得先开户&#xff0c;根据规…...

MySQL(存储过程,store procedure)——存储过程的前世今生 MySQL存储过程体验 MybatisPlus中使用存储过程

前言 SQL&#xff08;Structured Query Language&#xff09;是一种用于管理关系型数据库的标准化语言&#xff0c;它用于定义、操作和管理数据库中的数据。SQL是一种通用的语言&#xff0c;可以用于多种关系型数据库管理系统&#xff08;RDBMS&#xff09;&#xff0c;如MySQ…...

如何建立线上线下相结合的数字化新零售体系?

身处今数字化时代&#xff0c;建立线上线下相结合的数字化新零售体系是企业成功的关键。蚓链数字化营销系统致力于帮助企业实现数字化转型&#xff0c;打通线上线下销售渠道&#xff0c;提升品牌影响力和用户黏性&#xff0c;那么具体是如何建立的&#xff1f; 1. 搭建数字化中…...

python:xlwings 操作 Excel 加入图片

pip install xlwings ; xlwings-0.28.5-cp37-cp37m-win_amd64.whl (1.6 MB) 摘要&#xff1a;Make Excel fly: Interact with Excel from Python and vice versa. Requires: pywin32 编写 xlwings_test.py 如下 # -*- coding: utf-8 -*- """ xlwings 结合 …...

关于hive的时间戳

unix_timestamp&#xff08;&#xff09;和 from_unixtime&#xff08;&#xff09;的2个都是格林威治时间 北京时间 格林威治时间8 from_unixtme 是可以进行自动时区转换的 (4.0新特性) 4.0之前可以通过from_utc_timestamp进行查询 如果时间戳为小数&#xff0c;是秒&#…...

win10 wsl安装步骤

参考&#xff1a; 安装 WSL | Microsoft Learn 一、安装wsl 1.若要查看可通过在线商店下载的可用 Linux 发行版列表&#xff0c;请输入&#xff1a; wsl --list --online 或 wsl -l -o> wsl -l -o 以下是可安装的有效分发的列表。 使用 wsl.exe --install <Distro>…...

深入理解Spring Boot AOP:切面编程的优势与应用

在开发现代化的软件系统中&#xff0c;我们经常会遇到一些横切关注点&#xff08;cross-cutting concerns&#xff09;&#xff0c;比如日志记录、安全控制、事务管理等。传统的面向对象编程&#xff08;OOP&#xff09;在处理这些关注点时往往需要在多个模块中重复编写相似的代…...

使用大模型提效程序员工作

引言 随着人工智能技术的不断发展&#xff0c;大模型在软件开发中的应用越来越广泛。 这些大模型&#xff0c;如GPT、文心一言、讯飞星火、盘古大模型等&#xff0c;可以帮助程序员提高工作效率&#xff0c;加快开发速度&#xff0c;并提供更好的用户体验。 本文将介绍我在实…...

深入探索Java JPA中的CriteriaQuery

在Java持久化API(JPA)中,CriteriaQuery 提供了强大的查询功能,允许我们以面向对象的方式构建动态查询。今天我们将通过一个实际的例子,深入探讨如何使用CriteriaQuery来获取特定书籍的最新更新ID。 什么是CriteriaQuery? CriteriaQuery是JPA的一部分,它提供了一种类型…...

MCP23017按键矩阵驱动库:嵌入式I²C GPIO扩展与中断控制

1. 项目概述MentorBitMatrizPulsadores 是一款专为 MentorBit 兼容硬件平台设计的嵌入式驱动库&#xff0c;核心目标是简化基于 MCP23017 IC GPIO 扩展器的按键矩阵&#xff08;Keypad Matrix&#xff09;控制与状态读取。该库并非从零实现底层 IC 通信协议&#xff0c;而是构建…...

基于BANG语言的Sigmoid算子开发与PyTorch集成实战指南

1. BANG语言与Sigmoid算子开发基础 第一次接触寒武纪BANG语言时&#xff0c;我被它类似CUDA但更简洁的语法设计惊艳到了。这种专为MLU硬件设计的异构编程语言&#xff0c;通过在C/C基础上扩展并行计算特性&#xff0c;让开发者能更高效地利用寒武纪芯片的算力资源。 BANG核心语…...

神马网站 SEO 优化对网站转化率的影响

神马网站 SEO 优化对网站转化率的影响 在当今互联网时代&#xff0c;网站的流量和转化率直接关系到企业的销售和品牌的知名度。仅仅拥有流量并不意味着一切都顺风顺水&#xff0c;如何把这些流量转化为实际的业务和销售&#xff0c;这就涉及到神马网站的SEO优化对网站转化率的…...

OpenClaw二次开发:基于Qwen3.5-9B定制个性化技能模块

OpenClaw二次开发&#xff1a;基于Qwen3.5-9B定制个性化技能模块 1. 为什么需要自定义技能模块 去年冬天&#xff0c;我发现自己每天早晨都要手动查询天气来决定穿什么衣服。作为一个技术爱好者&#xff0c;我开始思考&#xff1a;能否让OpenClaw自动完成这个任务&#xff1f…...

别再只跑Demo了!手把手教你用TensorFlow训练自己的谷物分类模型(11类数据集)

从零构建高精度谷物分类模型&#xff1a;TensorFlow实战指南 当你第一次接触深度学习时&#xff0c;可能已经运行过MNIST手写数字识别或CIFAR-10这样的标准Demo。但真正要解决实际问题时&#xff0c;这些玩具数据集远远不够。本文将带你用TensorFlow处理一个真实的11类谷物图像…...

TGP Ecran:Arduino OLED显示库的轻量封装与非阻塞刷新设计

1. 项目概述TGP Ecran 是一款面向嵌入式 Arduino 平台的 OLED 显示驱动封装库&#xff0c;其核心定位是降低 Adafruit SSD1306 驱动库的使用门槛&#xff0c;同时保留底层图形能力的完整可访问性。该库并非从零实现的显示驱动&#xff0c;而是基于 Adafruit 官方 SSD1306 和 GF…...

多层PCB结构与过孔工艺深度解析

1. 多层PCB内部结构探秘作为一名硬件工程师&#xff0c;第一次拆解十层PCB板时&#xff0c;那种震撼感至今难忘。密密麻麻的过孔像微型蚁穴般贯穿板体&#xff0c;各层铜箔线路在灯光下泛着金属光泽。本文将用3D视角为你拆解这块"电子千层糕"的构造奥秘。多层PCB的核…...

Serverless测试噩梦:冷启动延迟搞垮电商大促

一场被“隐形杀手”击溃的战役凌晨两点&#xff0c;某头部电商平台的“双十一”大促作战指挥中心。流量曲线在预热阶段平稳爬升&#xff0c;技术团队信心满满——所有核心交易链路都已迁移至先进的Serverless架构&#xff0c;理论上具备无限弹性。然而&#xff0c;零点的钟声敲…...

空间多组学解决方案发展提速:未来六年CAGR锁定15.3%,行业增长预期持续向好

在生命科学领域&#xff0c;精准医学和个性化治疗的需求日益增长&#xff0c;对生物组织和细胞在空间维度上的深入理解成为关键。空间多组学解决方案作为这一需求的核心支撑技术&#xff0c;正受到全球科研和产业界的广泛关注。据恒州诚思调研统计&#xff0c;2025年全球空间多…...