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>

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

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

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

相关文章

ODrive移植keil(七)—— 插值算法和偏置校准

目录 一、角度读取1.1、硬件接线1.2、程序演示1.3、代码说明 二、锁相环和插值算法2.1、锁相环2.2、插值2.3、角度补偿 三、偏置校准3.1、硬件接线3.2、官方代码操作3.3、移植后的代码操作3.4、代码说明3.5、SimpleFOC的偏置校准对比 ODrive、VESC和SimpleFOC 教程链接汇总&…

蓝桥杯(等差素数列,C++)

思路&#xff1a; 1、因为找的是长度为10&#xff0c;且公差最小的等差素数列&#xff0c;直接用枚举即可。 2、枚举用三重循环&#xff0c;第一重枚举首项&#xff0c;第二重枚举公差&#xff0c;第三重因为首项算一个&#xff0c;所以枚举九个等差素数。 代码&#xff1a;…

《从菜鸟到大师之路 正则表达式 篇》

《从菜鸟到大师之路 正则表达式 篇》 正则表达式是一个强大的文本匹配工具。但是&#xff0c;对于前端初学者来说&#xff0c;众多的符号和规则可能让人难以理解。其实&#xff0c;你不需要记住所有的正则表达式语法&#xff01;本文将分享一些简单而实用的技巧&#xff0c;帮…

ShopXO download 任意文件读取

漏洞描述 ShopXO存在任意文件读取漏洞&#xff0c;攻击者可利用该漏洞获取敏感信息 漏洞复现 访问url&#xff1a; 构造payload 漏洞证明&#xff1a; 文笔生疏&#xff0c;措辞浅薄&#xff0c;望各位大佬不吝赐教&#xff0c;万分感谢。 免责声明&#xff1a;由于传播或…

动态内存管理(malloc calloc realloc free)--- C语言

文章目录 写在前面1. malloc 和 free函数1.1 malloc函数介绍1.2 free函数介绍 2. calloc函数3. realloc函数4. 常见的动态内存错误4.1 对NULL指针的解引用操作4.2 对动态开辟空间的越界访问4.3 对非动态开辟内存使用free释放4.4 使用free释放一块动态开辟内存的一部分4.5 对同一…

低代码提速应用开发

低代码介绍 低代码平台是指一种能够帮助企业快速交付业务应用的平台。自2000年以来&#xff0c;低代码市场一直充斥着40大大小小的各种玩家&#xff0c;比如国外的Appian、K2、Pega Systems、Salesforce和Ultimus&#xff0c;国内的H3 BPM。 2015年以后&#xff0c;这个市场更是…

linux 安装python django pip 遇到的问题

Python解决SSL不可用问题 解决方案&#xff1a; 首先要明白python版本需要和openssl的版本需要相对匹配的&#xff0c;在Python3.7之后的版本&#xff0c;依赖的openssl&#xff0c;必须要是1.1或者1.0.2之后的版本&#xff0c;或者安装了2.6.4之后的libressl&#xff0c;linux…

centos7下安装elasticsearch7.8.1并配置远程连接

1、下载安装包 sudo wget https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-7.8.1-linux-x86_64.tar.gz 2、解压 sudo tar -zxvf elasticsearch-7.8.1-linux-x86_64.tar.gz 3、添加用户并设置密码 sudo useradd es sudo passwd es # 设置密码 Lida15…

Pycharm 2023 设置远程调试

pycharm 版本 &#xff1a; 2023.2.1 整体流程参考&#xff1a;https://blog.csdn.net/xuanhaolaile/article/details/128293254 首先确定远程服务器上已经安装好 requirements.txt 中所需的依赖包。 1、SSH Configurations 添加远程服务器 2、Python Interpreter 注意&…

Leetcode算法解析——查找总价格为目标值的两个商品

1. 题目链接&#xff1a;LCR 179. 查找总价格为目标值的两个商品 2. 题目描述&#xff1a; 商品价格按照升序记录于数组 price。请在购物车中找到两个商品的价格总和刚好是 target。若存在多种情况&#xff0c;返回任一结果即可。 示例 1&#xff1a; 输入&#xff1a;price …

Linux信号 signal()编程

在Linux的进程间通信中可以用signal&#xff08;&#xff09;函数进行信号与信息传递。 1.信号 信号的名字和编号&#xff1a; 每个信号都有一个名字和编号&#xff0c;这些名字都以“SIG”开头&#xff0c;例如“SIGIO ”、“SIGCHLD”等等。 信号定义在signal.h头文件中&am…

虚幻阴影整理

虚拟阴影贴图&#xff08;VSM&#xff09;是一种全新的阴影贴图方法&#xff0c;可以提供稳定的高分辨率阴影。通过与虚幻引擎5的Nanite虚拟几何体、Lumen全局光照和反射以及世界分区功能结合使用&#xff0c;它能够实现电影级的品质效果&#xff0c;为大型开放场景提供光照。 …

html和css基础练习

vscode快捷键 alt b 在浏览器中打开 alt shift b 在其他浏览器打开 ctrl / 注释 ctrl y 快捷键删除 参考文章 https://www.bilibili.com/video/BV1m84y1w7Tb 基础html标签 img&#xff1a;图像&#xff0c;title&#xff1a;头部文字&#xff0c;body&#xff1a;主…

使用匿名函数在Golang中的好处

发挥Golang中无名代码块的潜力 匿名函数&#xff0c;也被称为lambda函数或闭包&#xff0c;是Golang中的一个强大功能&#xff0c;提供了许多好处。这些无名代码块为开发人员在设计和构建其代码时提供了更大的灵活性和模块化。在本节中&#xff0c;我们将探讨使用匿名函数可以…

AI对网络安全的影响与挑战

近年来&#xff0c;随着人工智能&#xff08;AI&#xff09;技术的快速发展&#xff0c;网络安全领域也开始逐渐引入生成式AI应用。根据最新的数据研究&#xff0c;生成式AI对网络安全和合规的影响最大&#xff0c;同时也包括了IT和云的运维、硬件和软件支持领域。通过AI和自动…

基于Java的点歌管理系统设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09;有保障的售后福利 代码参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作…

【VTK】基础知识分析

很高兴在雪易的CSDN遇见你 &#xff0c;给你糖糖 欢迎大家加入雪易社区-CSDN社区云 前言 本文分享VTK基础操作技术&#xff0c;记录vtk编程中常用的接口&#xff0c;变量等的创建及使用方法希望对各位小伙伴有所帮助&#xff01; 感谢各位小伙伴的点赞关注&#xff0c;小易…

华为云云耀云服务器L实例评测|华为云耀云服务器L实例私有库搭建verdaccio(八)

九、华为云耀云服务器L实例私有库搭建verdaccio&#xff1a; Verdaccio 是一个简单的、零配置本地私有 npm 软件包代理注册表。Verdaccio 开箱即用&#xff0c;拥有自己的小型数据库&#xff0c;能够代理其它注册表&#xff08;例如 npmjs.org&#xff09;&#xff0c;缓存下载…

软件工程与计算总结(十)软件体系结构设计与构建

目录 ​编辑 一.体系结构设计过程 1.分析关键需求和项目约束 2.选择体系结构风格 3.体系结构逻辑设计 4.体系结构实现 5.完善体系结构设计 6.定义构件接口 二.体系结构原型构建 1.包的创建 2.重要文件的创建 3.定义构件之间的接口 4.关键需求的实现 三.体系结构的…

屏幕亮度调节保护您的眼睛

官方下载地址&#xff1a; 安果移动 视频演示&#xff1a;屏幕亮度调节-保护您的眼睛_哔哩哔哩_bilibili 嗨&#xff0c;亲爱的用户&#xff0c;你是否有过这样的体验&#xff1a;夜晚安静的时刻&#xff0c;想要在抖音上看看热门的舞蹈、在快手上发现生活的 趣味、或是在哔…