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

vue3 采用xlsx库实现本地上传excel文件，前端解析为Json数据

news 来源：原创 2025/9/17 1:22:59

需求：本地上传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…...

编程日记 2025/9/17 1:22:59

【Linux系统】—— 冯诺依曼体系结构与操作系统初理解

【Linux系统】—— 冯诺依曼体系结构与操作系统初理解 1 冯诺依曼体系结构1.1 基本概念理解1.2 CPU只和内存打交道1.3 为什么冯诺依曼是这种结构1.4 理解数据流动 2 操作系统2.1 什么是操作系统2.2 设计OS的目的2.3 操作系统小知识点2.4 如何理解"管理"2.5 系统调用和…...

编程日记 2025/9/2 5:00:15

易语言模拟真人鼠标轨迹算法 - 防止游戏检测

一.简介鼠标轨迹算法是一种模拟人类鼠标操作的程序，它能够模拟出自然而真实的鼠标移动路径。鼠标轨迹算法的底层实现采用C/C语言，原因在于C/C提供了高性能的执行能力和直接访问操作系统底层资源的能力。鼠标轨迹算法具有以下优势： 模拟…...

编程日记 2025/9/13 22:09:41

PHP旅游门票预订系统小程序源码

🌍 旅游门票预订系统：一站式畅游新体验，开启您的梦幻旅程 🌟 一款基于ThinkPHPUniapp精心雕琢的旅游门票预订系统，正翘首以待，为您揭开便捷、高效、全面的旅游预订新篇章！它超越了传统预订平台…...

编程日记 2025/9/11 7:05:24

侯捷 C++ 课程学习笔记：内存管理的每一层面

目录一、C 应用程序的内存管理架构二、C 内存原语三、内存管理的实际应用四、学习心得一、C 应用程序的内存管理架构 C 应用程序的内存管理架构可以分为多个层次，从应用程序到操作系统 API，每一层都提供了不同的内存管理功能。架构图&#xf…...

编程日记 2025/9/12 17:18:48

Python开发Django面试题及参考答案

目录 Django 的请求生命周期是怎样的？ Django 的 MTV 架构中的各个组件分别是什么？ Django 的 URL 路由是如何工作的？ Django 的视图函数和视图类有什么区别？ Django 的模板系统是如何渲染 HTML 的？ Django 的 ORM 是如何工作的？ Django 的中间件是什么？它的作用是…...

编程日记 2025/9/11 19:00:21

前端js进阶，ES6语法，包详细

进阶ES6 作用域的概念加深对js理解 let、const申明的变量，在花括号中会生成块作用域，而var就不会生成块作用域作用域链本质上就是底层的变量查找机制作用域链查找的规则是:优先查找当前作用域先把的变量，再依次逐级找父级作用域直到全局…...

编程日记 2025/9/14 22:35:04

【三十四周】文献阅读：DeepPose: 通过深度神经网络实现人类姿态估计

目录摘要AbstractDeepPose: 通过深度神经网络实现人类姿态估计研究背景创新点方法论归一化网络结构级联细化流程代码实践局限性实验结果总结摘要人体姿态估计旨在通过图像定位人体关节，是计算机视觉领域的核心问题之一。传统方法多基于局部检测与图模型&#x…...

编程日记 2025/9/14 12:24:05

将 Vue 项目打包后部署到 Spring Boot 项目中的全面指南

将 Vue 项目打包后部署到 Spring Boot 项目中的全面指南在现代 Web 开发中，前后端分离架构已经成为主流。然而，在某些场景下，我们可能需要将前端项目（如 Vue）与后端项目（如 Spring Boot）集成部…...

编程日记 2025/9/13 17:23:06

Linux 权限系统和软件安装（二）：深入理解 Linux 权限系统

在 Linux 的世界里，权限系统犹如一位忠诚的卫士，严密守护着系统中的文件与目录，确保只有具备相应权限的用户才能进行操作。与其他一些操作系统不同，Linux 并不依据文件后缀名来标识文件的操作权限，而是构建了一套独特且…...

编程日记 2025/9/15 16:11:14

计算机网络常考大题

运输层的主要功能运输层为应用进程之间提供端到端的逻辑通信。运输层还要对收到的报文进行差错检测。运输层需要有两种不同的运输协议，即面向连接的 TCP 和无连接的 UDP 传输控制协议 TCP 概述 TCP 是面向连接的运输层协议。每一条 TCP 连接只能有两个端点…...

编程日记 2025/9/12 11:32:44

百度首页上线 DeepSeek 入口，免费使用

大家好，我是小悟。百度首页正式上线了 DeepSeek 入口，这一重磅消息瞬间在技术圈掀起了惊涛骇浪，各大平台都被刷爆了屏。百度这次可太给力了，PC 端开放仅 1 小时，就有超千万人涌入体验。这速度，简直比火…...

编程日记 2025/9/5 21:49:29

《跟李沐学 AI》AlexNet论文逐段精读学习心得 | PyTorch 深度学习实战

前一篇文章，使用 AlexNet 实现图片分类 | PyTorch 深度学习实战本系列文章 GitHub Repo: https://github.com/hailiang-wang/pytorch-get-started 本篇文章内容来自于学习 9年后重读深度学习奠基作之一：AlexNet【下】【论文精读】】的心得。《跟李沐…...

编程日记 2025/9/10 4:05:40

Linux搭建Nginx直播流媒体服务RTMP/RTSP转Http-flv视频浏览器在线播放/Vue/Java/ffmpeg

参考文章： https://blog.csdn.net/whatareyouding/article/details/144317654 https://www.cnblogs.com/Gredae/p/18362900 https://www.cnblogs.com/kn-zheng/p/17422707.html https://blog.51cto.com/u_16099344/10281495 https://www.tulingxueyuan.cn/tlzx/jsp…...

编程日记 2025/9/14 3:57:47

Node.js高频面试题精选及参考答案

目录什么是 Node.js？它的主要特点有哪些？ Node.js 的事件驱动和非阻塞 I/O 模型是如何工作的？为什么 Node.js 适合处理高并发场景？ Node.js 与传统后端语言（如 Java、Python）相比，有哪些优势和劣势？简述 Node.js 的运行原理，包括 V8 引擎的作用。什么是 Nod…...

编程日记 2025/9/13 18:20:38

公开整理-最新中国城市统计NJExcel+PDF版本（1985-2024年）

数据简介：《中国城市统计NJ》从1985年开始，本NJ内容共分四个部分:第一部分是全国城市行政区划,列有不同区域、不同级别的城市分布情况;第二、三部分分别是地级以上城市统计资料和县级城市统计资料,具体包括人口、劳动力及土地资源、综合经济、工业、交通…...

编程日记 2025/9/10 7:29:24

ModuleNotFoundError: No module named ‘xgboost‘

问题： --------------------------------------------------------------------------- ModuleNotFoundError Traceback (most recent call last) Cell In[1], line 64 import pickle5 from sklearn.metrics import mean_squared_error, r2_…...

编程日记 2025/9/8 0:06:50

应用层协议HTTP

应用层协议HTTP 引言应用层协议是程序员自己制定的，但是良好的协议是保证网络通信的基础，前代的计算工程师已经帮助我们制定了一些很好用的应用层协议，http(hybertext transfer protocol)(超文本传输协议)就是其中之一。 http协议是客户端…...

编程日记 2025/9/10 8:02:16

常见的“锁”有哪些？

悲观锁悲观锁认为在并发环境中，数据随时可能被其他线程修改，因此在访问数据之前会先加锁，以防止其他线程对数据进行修改。常见的悲观锁实现有： 1.互斥锁原理：互斥锁是一种最基本的锁类型，同一时间只允…...

编程日记 2025/9/16 0:56:39

PAT 甲级 1091 Acute Stroke

一开始只是简单的递归（bfs），导致最后两个没法通过（爆栈了） //最后两个案例没有通过，只是最简单的bfs暴力算法 #include<cstdio> using namespace std; int v[62][1288][130]{0}; int find(int i,int…...

编程日记 2025/9/10 19:27:09

flowable适配达梦数据库

文章目录适配相关问题无法从数据库产品名称“DM DBMS”中推断数据库类型分析解决构建ibatis SqlSessionFactory时出错：inStream参数为null分析解决 liquibase相关问题问题一：不支持的数据库 Error executing SQL call current_schema: 无法解析的成员访…...

编程日记 2025/9/15 5:04:13

Git入门：数据模型 to 底层原理

版本控制系统（VCS）是软件开发中不可或缺的工具，而Git作为现代版本控制的事实标准，其底层设计远比表面命令更加优雅。本文将从数据模型的角度，揭示Git的核心工作原理。 Git的核心概念 1. 快照（Snapshot&am…...

编程日记 2025/9/11 19:49:13

Bootstrap Blazor UI 中＜Table＞组件＜TableColumn＞使用备忘01：EF Core 外码处理

应用场景：将外码转换为对应的文本进行显示、编辑。例如，有一个【用户】表，其中有一个【用户类型ID】字段；另有一个【用户类型】表，包含【ID】、【名称】等字段。现在要求在 <Table> 组件显示列表中&#xff0c…...

编程日记 2025/9/14 4:17:11

Redis过期数据处理

Redis缓存过期后数据还能恢复吗？ Redis缓存过期后，数据通常会被删除，但可以通过以下几种方法尝试恢复数据： 1. 数据备份恢复 RDB 持久化恢复：Redis 提供了 RDB（Redis Database Backup）持久化…...

编程日记 2025/9/16 2:17:22

零基础学C/C++160——字符串

题目描述给定两个由小写字母组成的字符串A和B，判断B中的字符是否全部在A中出现。输入输入为多组测试数据。输入数据只有一行，包含2个字符串A和B，每个字符串后面有一个#字符标记（#不属于A或B），其中B…...

编程日记 2025/9/15 21:59:53

Spring Boot+Vue项目从零入手

Spring BootVue项目从零入手一、前期准备在搭建spring bootvue项目前，我们首先要准备好开发环境，所需相关环境和软件如下： 1、node.js 检测安装成功的方法：node -v 2、vue 检测安装成功的方法：vue -V 3、Visu…...

编程日记 2025/8/16 18:10:01

Linux 命令大全完整版（13）

5.文件管理命令 patch 功能说明：修补文件。语　　法：patch [-bceEflnNRstTuvZ][-B <备份字首字符串>][-d <工作目录>][-D <标示符号>][-F <监别列数>][-g <控制数值>][-i <修补文件>][-o <输出文件>][-p &l…...

编程日记 2025/9/15 5:04:14

MySQL面试学习

MySQL 1.事务事务的4大特性事务4大特性：原子性、一致性、隔离性、持久性原⼦性： 事务是最⼩的执⾏单位，不允许分割。事务的原⼦性确保动作要么全部完成，要么全不执行一致性： 执⾏事务前后，数据保持⼀…...

编程日记 2025/9/13 20:12:26

CentOS中shell脚本对多台机器执行下载安装

1.建立免密ssh连接详情见这篇： CentOS建立ssh免密连接（含流程剖析）-CSDN博客 2.脚本编写我这里只是简单写了个demo进行演示，如果服务器很多可以先暂存成文件再逐行读取host进行连接并执行命令用node1去ssh连接node2和node…...

编程日记 2025/9/15 14:25:00

【Java】多线程和高并发编程（四）：阻塞队列（上）基础概念、ArrayBlockingQueue

文章目录四、阻塞队列1、基础概念1.1 生产者消费者概念1.2 JUC阻塞队列的存取方法 2、ArrayBlockingQueue2.1 ArrayBlockingQueue的基本使用2.2 生产者方法实现原理2.2.1 ArrayBlockingQueue的常见属性2.2.2 add方法实现2.2.3 offer方法实现2.2.4 offer(time,unit)方法2.2.5 p…...

编程日记 2025/9/10 9:56:29

C语言多人聊天室 ---chat(客户端聊天)

head.h #ifndef __HEAD_H #define __HEAD_H// 常用头文件 #include <stdio.h> #include <stdlib.h> #include <string.h>// 网络编程涉及的头文件 #include <sys/socket.h> #include <netinet/in.h> #include <netinet/ip.h>#include <…...

编程日记 2025/9/11 21:35:32

设计模式教程：命令模式（Command Pattern）

1. 什么是命令模式？ 命令模式（Command Pattern）是一种行为型设计模式。它将请求封装成一个对象，从而使你能够用不同的请求、队列和日志请求以及支持可撤销操作。简单来说，命令模式通过把请求封装成对象的方式解耦了…...

编程日记 2025/9/12 4:17:41

【华三】STP的角色选举（一文讲透）

【华三】STP的角色选举一、引言二、STP基础概念扫盲三、根桥选举过程详解四、根端口选举过程详解五、指定端口选举过程详解六、阻塞端口七、总结与配置建议七、附录**1. BPDU字段结构图（文字描述）****2. 华三STP常用命令速查表** 文章总结一、引言在…...

编程日记 2025/9/15 13:40:04

Trae+Qt+MSVC环境配置

Trae Trae是字节跳动基于VSCode推出的AI集成开发环境（IDE），是一款专为中文开发者深度定制的智能编程工具。其目标是通过AI技术实现从“Copilot”到“Autopilot”的编程模式演进。类似这样的IDE比如Windsurf、Cursor，都是基于VS…...

编程日记 2025/9/13 11:19:28

SpringSecurity初始化的本质

一、对SpringSecurity初始化的几个疑问通过前面第一次请求访问的分析我们明白了一个请求就来后的具体处理流程对于一个请求到来后会通过FilterChainProxy来匹配一个对应的过滤器链来处理该请求。那么这里我们就有几个疑惑。 FilterChainProxy什么时候创建的?过滤器链和对应的…...

编程日记 2025/9/10 16:00:33

3D Gaussian Splatting（3DGS）的核心原理

3D Gaussian Splatting（3DGS）的核心原理 1. 基本概念 3D Gaussian Splatting（3DGS） 是一种基于高斯分布的点云表示与渲染技术，核心思想是将三维场景建模为一系列可学习的高斯分布，每个高斯分布具有以下…...

编程日记 2025/9/16 2:17:24

Transformers快速入门-学习笔记

一、自然语言处理 NLP 是借助计算机技术研究人类语言的科学自然语言处理发展史一、不懂语法怎么理解语言依靠语言学家人工总结文法规则 Chomsky Formal Languages 难点：上下文有关文法规则增多，存在矛盾二、只要看得足够多，就能处理语言…...

编程日记 2025/9/14 3:07:43

【Http和Https区别】

概念： 一、Http协议 HTTP（超文本传输协议）是一种用于传输超媒体文档（如HTML）的应用层协议，主要用于Web浏览器和服务器之间的通信。http也是客户端和服务器之间请求与响应的标准协议，客户端通常…...

编程日记 2025/9/13 14:24:36

学习路程二 LangChain基本介绍

前面简单调用了一下deepseek的方法，发现有一些疑问和繁琐的问题，需要更多的学习，然后比较流行的就是LangChain这个东西了。目前大部分企业都是基于 LangChain 、qwen-Agent、lammaIndex框架进行大模型应用开发。LangChain 提供了 Chain、To…...

编程日记 2025/9/8 9:54:50

简识Kafka集群与RocketMQ集群的核心区别

前记：各位潘安、各位子健/各位彦祖、于晏，文字较多，优先看目录。 Kafka集群与RocketMQ集群的核心区别及架构图例说明一、核心区别对比特性Kafka 集群RocketMQ 集群设计目标高吞吐量实时日志流系统（如日志收集、大数据流水线&a…...

编程日记 2025/9/9 3:46:36

基于Python+django+mysql旅游数据爬虫采集可视化分析推荐系统

2024旅游推荐系统爬虫可视化（协同过滤算法） 基于Pythondjangomysql旅游数据爬虫采集可视化分析推荐系统有文档说明部署文档视频讲解 ✅️基于用户的协同过滤推荐算法卖价就是标价~ 项目技术栈 Python语言、Django框架、MySQL数据库、requests网络爬虫…...

编程日记 2025/9/14 9:56:00

9-1. MySQL 性能分析工具的使用——last_query_cost，慢查询日志

9-1. MySQL 性能分析工具的使用——last_query_cost，慢查询日志文章目录 9-1. MySQL 性能分析工具的使用——last_query_cost，慢查询日志1. 数据库服务器的优化步骤2. 查看系统性能参数3. 统计SQL的查询成本：last_query_cost4. 定位执行慢的…...

编程日记 2025/9/15 12:44:39

网络安全监测探针安装位置网络安全监测系统

🍅 点击文末小卡片 ，免费获取网络安全全套资料，资料在手，涨薪更快软件简介： SockMon(SocketMonitor)网络安全监控系统是一款为电脑专业人员打造的一款出色的安防监控软件。在如今这个恶意软件，攻击&#…...

编程日记 2025/8/16 17:06:11

Git版本控制系统---本地操作（万字详解！）

目录 git基本配置认识工作区、暂存区、版本库添加文件--情况一： 添加文件-情况二: 修改文件: 版本回退： git基本配置 1.初始化本地仓库，注意：一定要在一个目录下进行，一般都是新建一个文件夹，在文件…...

编程日记 2025/9/11 7:08:16

forge-1.21.x模组开发（二）给物品添加功能

功能效果创建一个兑换券，当使用兑换券对着兑换机右键时，获得一条烤鱼创建兑换券创建ExchangeCouponsItem.java，继承Item，定义兑换券内容 public class ExchangeCouponsItem extends Item {public ExchangeCouponsItem(Prop…...

编程日记 2025/9/15 14:23:12

elasticsearch在windows上的配置

写在最前面： 上资源第一步解压： 第二步配置两个环境变量第三步如果是其他资源需要将标蓝的文件中的内容加一句 xpack.security.enabled: false 不同版本的yaml文件可能配置不同，末尾加这个 xpack.security.enabled: true打开bin目…...

编程日记 2025/9/7 15:00:10

机器学习数学通关指南——拉格朗日乘子法

前言本文隶属于专栏《机器学习数学通关指南》，该专栏为笔者原创，引用请注明来源，不足和错误之处请在评论区帮忙指出，谢谢！ 本专栏目录结构和参考文献请见《机器学习数学通关指南》正文一句话总结拉格朗日乘子法…...

编程日记 2025/9/10 6:22:18

Matplotlib，Streamlit，Django大致介绍

Matplotlib：是一个用于创建各种类型的静态、动态和交互式图表的Python绘图库。可以通过pip install matplotlib命令进行安装，安装完成后，在Python脚本中使用import matplotlib语句导入即可开始使用。Streamlit：是一个用于快速构建…...

编程日记 2025/9/12 3:36:18

智慧废品回收小程序php+uniapp

废品回收小程序：数字化赋能环保，开启资源循环新时代城市垃圾治理难题，废品回收小程序成破局关键随着城市化进程加速与消费水平提升，我国生活垃圾总量逐年攀升，年均增速达5%-8%，其中超30%为可回收物。然…...

编程日记 2025/9/8 17:46:30

深搜专题2：组合问题

描述组合问题就是从n个元素中抽出r个元素(不分顺序且r < ＝ n)， 我们可以简单地将n个元素理解为自然数1，2，…，n，从中任取r个数。例如n ＝ 5 ，r ＝ 3 ，所…...

编程日记 2025/9/13 16:18:27