vue3 采用xlsx库实现本地上传excel文件,前端解析为Json数据
需求:本地上传excel 文件,但需要对excel 文件的内容进行解析,然后展示出来
1. 安装依赖
首先,确保安装了 xlsx 库:
bash复制
npm install xlsx
2. 创建 Vue 组件
创建一个 Vue 组件(如 ExcelUpload.vue),用于实现文件上传和解析功能。
组件代码:
<template>
<div>
<input type="file" class="file-btn hoverPointer" accept=".xls,.xlsx"@change="changeExcel($event)" />
<div v-if="tableData.length > 0">
<table>
<thead>
<tr>
<th v-for="header in headers" :key="header">{{ header }}</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, index) in tableData" :key="index">
<td v-for="cell in row" :key="cell">{{ cell }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</template><script>
import { ref } from 'vue';
import * as XLSX from 'xlsx';export default {
setup() {
const headers = ref([]);
const tableData = ref([]);const changeExcel= (event) => {
const files = e.target.files
if (files.length <= 0) {
return false
} else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
console.log('上传格式不正确,请上传xls或者xlsx格式')
return false
}
const reader = new FileReader();
reader.onload = (e) => {
const data = e.target.result;
const workbook = XLSX.read(data, { type: 'binary' });
const sheetName = workbook.SheetNames[0];
const worksheet = workbook.Sheets[sheetName];
const json = XLSX.utils.sheet_to_json(worksheet, { header: 1 });headers.value = json[0]; // 表头
tableData.value = json.slice(1); // 表格数据
};
reader.readAsBinaryString(files);
};return {
headers,
tableData,
handleFileUpload,
};
},
};
</script><style scoped>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
</style>
3. 使用组件
在主应用文件(如 App.vue)中引入并使用该组件:
<template>
<div id="app">
<ExcelUpload />
</div>
</template><script>
import ExcelUpload from './components/ExcelUpload.vue';export default {
name: 'App',
components: {
ExcelUpload,
},
};
</script>
4. 功能说明
-
文件上传:通过
<input type="file">元素选择 Excel 文件。 -
文件读取:使用
FileReader读取文件内容为二进制字符串 。 -
解析为 JSON:使用
xlsx库将 Excel 数据转换为 JSON 格式 。 -
数据展示:将解析后的表头和数据展示在表格中。
5. 扩展功能
-
错误处理:在文件读取和解析过程中添加错误处理,提示用户文件格式错误或解析失败。
-
大文件优化:对于大文件,可以分页显示数据或使用异步加载。
-
自定义解析逻辑:根据实际需求,对数据进行格式转换或校验。
通过以上步骤,你可以在 Vue 3 项目中实现本地上传 Excel 文件并解析为 JSON 数据的功能。
相关文章:
vue3 采用xlsx库实现本地上传excel文件,前端解析为Json数据
需求:本地上传excel 文件,但需要对excel 文件的内容进行解析,然后展示出来 1. 安装依赖 首先,确保安装了 xlsx 库: bash复制 npm install xlsx 2. 创建 Vue 组件 创建一个 Vue 组件(如 ExcelUpload.v…...
计算机视觉:经典数据格式(VOC、YOLO、COCO)解析与转换(附代码)
第一章:计算机视觉中图像的基础认知 第二章:计算机视觉:卷积神经网络(CNN)基本概念(一) 第三章:计算机视觉:卷积神经网络(CNN)基本概念(二) 第四章:搭建一个经典的LeNet5神经网络(附代码) 第五章࿱…...
FPGA DSP:Vivado 中带有 DDS 的 FIR 滤波器
本文使用 DDS 生成三个信号,并在 Vivado 中实现低通滤波器。低通滤波器将滤除相关信号。 介绍 用DDS生成三个信号,并在Vivado中实现低通滤波器。低通滤波器将滤除较快的信号。 本文分为几个主要部分: 信号生成:展示如何使用DDS&am…...
记录此刻:历时两月,初步实现基于FPGA的NVMe SSD固态硬盘存储控制器设计!
背景 为满足实验室横向项目需求,在2024年12月中下旬导师提出基于FPGA的NVMe SSD控制器研发项目。项目核心目标为:通过PCIe 3.0 x4接口实现单盘3000MB/s的持续读取速率。 实现过程 调研 花了半个月的时间查阅了一些使用FPGA实现NVME SSD控制器的论文、…...
【计算机网络】OSI模型、TCP/IP模型、路由器、集线器、交换机
一、计算机网络分层结构 计算机网络分层结构 指将计算机网络的功能划分为多个层次,每个层次都有其特定的功能和协议,并且层次之间通过接口进行通信。 分层设计的优势: 模块化:各层独立发展(如IPv4→IPv6,…...
正点原子[第三期]Arm(iMX6U)Linux系统移植和根文件系统构建-5.3 xxx_defconfig过程
前言: 本文是根据哔哩哔哩网站上“arm(iMX6U)Linux系统移植和根文件系统构键篇”视频的学习笔记,在这里会记录下正点原子 I.MX6ULL 开发板的配套视频教程所作的实验和学习笔记内容。本文大量引用了正点原子教学视频和链接中的内容。 引用: …...
250223-Linux/MacOS如何跳过Miniconda的条款阅读,直接安装Miniconda
你可以通过将 -b 参数传递给 Miniconda 的安装脚本,来跳过条款阅读并自动同意许可条款。这样安装会自动进行到下一步的选择项。下面是具体的安装命令: bash Miniconda3-latest-Linux-x86_64.sh -b这里的 -b 代表“批量模式”(batch mode&…...
点云的几何特征
点云的几何特征是基于一个点周围的邻域对该点周围几何形状的描述。例如,位于墙面上的一个点将具有较高的平面度planarity。 基于局部点云的特征值 λ1、λ2 和 λ3 以及特征向量 e1、e2 和e3计算得到的一系列几何特征,这些特征用于描述点云中点的局部几…...
月之暗面新发布: MUON 在 LLM 训练中的可扩展性
MUON 在 LLM 训练中的可扩展性 摘要 最近,基于矩阵正交化的 Muon 优化器(K. Jordan 等人,2024 年)在训练小型语言模型方面表现出色,但其在更大规模模型上的可扩展性尚未得到验证。我们确定了 Muon 放大的两个关键技术…...
10.Docker 仓库管理
Docker 仓库管理 Docker 仓库管理 Docker 仓库管理 Docker 仓库,类似于 yum 仓库,是用来保存镜像的仓库。为了方便的管理和使用 docker 镜像,可以将镜像集中保存至 Docker 仓库中,将制作好的镜像 push 到仓库集中保存,在需要镜像…...
Deepseek存算分离安全部署手册
Deepseek大火后,很多文章教大家部署Dfiy和ollamadeepseek,但是大部分都忽略了数据安全问题,本文重点介绍Deepseek存算分裂安全架设,GPU云主机只负责计算、CPU本地主机负责数据存储,确保数据不上云,保证私有…...
【Redis原理】底层数据结构 五种数据类型
文章目录 动态字符串SDS(simple dynamic string )SDS结构定义SDS动态扩容 IntSetIntSet 结构定义IntSet的升级 DictDict结构定义Dict的扩容Dict的收缩Dict 的rehash ZipListZipListEntryencoding 编码字符串整数 ZipList的连锁更新问题 QuickListQuickList源码 SkipListRedisOb…...
Java——抽象类
在Java中,抽象类(Abstract Class) 是一种特殊的类,用于定义部分实现的类结构,同时允许子类提供具体的实现。抽象类通常用于定义通用的行为或属性,而将具体的实现细节留给子类。 1. 抽象类的定义 语法&…...
DeepSeek在初创企业、教育和数字营销领域应用思考
如今,像 DeepSeek 这样的人工智能工具正在改变企业的运营方式,优化流程并显著提高生产力。通过重复任务的自动化、大量数据的分析以及内容创建效率的提高,组织正在寻找新的竞争和卓越方式。本文介绍了 DeepSeek 如何用于提高三个关键领域的生…...
java开发——为什么要使用动态代理?
举个例子:假如有一个杀手专杀男的,不杀女的。代码如下: public interface Killer {void kill(String name, String sex);void watch(String name); }public class ManKiller implements Killer {Overridepublic void kill(String name, Stri…...
c++中,什么时候应该使用mutable关键字?
在 C 中,mutable 关键字用于修饰类的成员变量,允许在 const 成员函数中修改这些变量。它的核心作用是区分 物理常量性(对象内存不可修改)和 逻辑常量性(对象对外表现的状态不变)。以下是详细解析࿱…...
deepseek本地部署,ragflow,docker
先下载ollama 1.官网下载 deepseek-r1:14bhttps://ollama.com/library/deepseek-r1:14b 2.GitHub下载GitHub - ollama/ollama: Get up and running with Llama 3.3, DeepSeek-R1, Phi-4, Gemma 2, and other large language models. 两种方式 安装完后,cmd-&g…...
智能优化算法:莲花算法(Lotus flower algorithm,LFA)介绍,提供MATLAB代码
一、 莲花算法 1.1 算法原理 莲花算法(Lotus flower algorithm,LFA)是一种受自然启发的优化算法,其灵感来源于莲花的自清洁特性和授粉过程。莲花的自清洁特性,即所谓的“莲花效应”,是由其叶片表面的微纳…...
通过AI辅助生成PPT (by quqi99)
作者:张华 发表于:2025-02-23 版权声明:可以任意转载,转载时请务必以超链接形式标明文章原始出处和作者信息及本版权声明(http://blog.csdn.net/quqi99) 问题 媳妇需要将一个pdf文件中的某些部分做成PPT课件,我在想是…...
P9631 [ICPC 2020 Nanjing R] Just Another Game of Stones Solution
Description 给定序列 a ( a 1 , a 2 , ⋯ , a n ) a(a_1,a_2,\cdots,a_n) a(a1,a2,⋯,an),有 m m m 个操作分两种: chmax ( l , r , k ) \operatorname{chmax}(l,r,k) chmax(l,r,k):对每个 i ∈ [ l , r ] i \in [l,r] i∈[l,…...
STM32开发者必看:OpenBLT Bootloader移植避坑指南(Keil环境实战)
STM32开发者必看:OpenBLT Bootloader移植避坑指南(Keil环境实战) 在嵌入式系统开发中,Bootloader的重要性不言而喻。它不仅是系统启动的第一道关卡,更是实现远程固件升级的关键组件。对于STM32开发者而言,O…...
保姆级教程:用R语言ggplot2为你的基因表达数据绘制带拟合线和统计指标的‘高级感’散点图
基因表达数据可视化:用ggplot2打造兼具科学性与美感的散点图 在生物信息学研究中,一张精心设计的散点图往往能比枯燥的数字表格更直观地揭示基因间的表达关系。当我们需要展示基因A与基因B的共表达模式时,基础的散点图虽然能完成任务…...
WorkshopDL:快速下载Steam创意工坊模组的专业解决方案
WorkshopDL:快速下载Steam创意工坊模组的专业解决方案 【免费下载链接】WorkshopDL WorkshopDL - The Best Steam Workshop Downloader 项目地址: https://gitcode.com/gh_mirrors/wo/WorkshopDL 你是否在非Steam平台玩游戏时,无法访问Steam创意工…...
别再为相位差发愁了!手把手教你用STM32F103的ADC1和ADC3实现精准同步采样
STM32多ADC同步采样实战:相位测量精度提升指南 在电机控制、电力监测或音频处理领域,工程师们经常需要面对一个棘手问题——当两路信号存在相位差时,传统轮流采样方式会导致相位信息失真。去年参与某变频器项目时,我们就曾因电流电…...
别再手写Comparator了!用Java 8的comparingInt()让对象排序代码清爽三倍
别再手写Comparator了!用Java 8的comparingInt()让对象排序代码清爽三倍 还在为Java集合排序写满屏的匿名内部类而头疼?每次看到new Comparator<T>()就开始条件反射地烦躁?是时候拥抱Java 8的函数式编程魔法了。Comparator.comparingIn…...
终极游戏自动化脚本:解放双手的完整指南
终极游戏自动化脚本:解放双手的完整指南 【免费下载链接】AzurLaneAutoScript Azur Lane bot (CN/EN/JP/TW) 碧蓝航线脚本 | 无缝委托科研,全自动大世界 项目地址: https://gitcode.com/gh_mirrors/az/AzurLaneAutoScript 想要在《碧蓝航线》中轻…...
深度学习篇---QLoRA微调
一、发展历程:从LoRA到QLoRA的技术飞跃1.1 LoRA的诞生与局限2021年,微软团队提出的LoRA(Low-Rank Adaptation)通过低秩矩阵分解实现了参数高效微调,让大模型微调的门槛大幅降低。然而,LoRA仍然面临一个核心…...
WebPlotDigitizer:当计算机视觉遇见科研数据挖掘的智能革命
WebPlotDigitizer:当计算机视觉遇见科研数据挖掘的智能革命 【免费下载链接】WebPlotDigitizer Computer vision assisted tool to extract numerical data from plot images. 项目地址: https://gitcode.com/gh_mirrors/we/WebPlotDigitizer 在科研和工程领…...
Qt Creator + GitHub Copilot 深度集成指南:解锁C++/Qt开发的AI生产力
1. 为什么你需要Qt Creator和GitHub Copilot这对黄金搭档 作为一个C/Qt开发者,我深知在UI设计、信号槽连接和业务逻辑编写这些日常工作中,重复性的代码编写有多让人头疼。直到我遇到了GitHub Copilot这个AI编程助手,配合Qt Creator使用后&…...
别再只盯着GPU了!聊聊手机里那个能效比爆表的CGRA NPU(以华为麒麟为例)
别再只盯着GPU了!聊聊手机里那个能效比爆表的CGRA NPU(以华为麒麟为例) 当你用手机拍下一张夜景照片,AI算法在毫秒间完成降噪、HDR合成和细节增强——这背后不是GPU在发力,而是一个名为NPU的专用处理器正在以极低功耗高…...
