【SpringBoot整合系列】SpringBoot+Vue3实现在线编辑Excel

server/2024/9/19 20:06:30/ 标签: spring boot, excel, 后端, oracle, java, 开发语言, 框架

目录

  • 基本实现
  • 后端 - Spring Boot
    • 依赖
    • 创建Controller(demo)
  • 前端 - Vue 3 + Vuetify
    • 安装Vuetify和Axios:
    • 创建组件
  • 注意事项

基本实现

  • 实现在线预览和编辑Excel的功能,尤其是编辑功能,涉及到更复杂的操作,因为需要在Web端提供类似桌面Excel软件的编辑体验。
  • 这通常需要一个强大的前端库来处理表格数据的渲染和编辑,以及后端的支持来保存更改。

后端 - Spring Boot

依赖

   <dependency><groupId>org.apache.poi</groupId><artifactId>poi-ooxml</artifactId><version>5.2.3</version></dependency>  

创建Controller(demo)

java">   package com.zjl.controller;import org.apache.poi.ss.usermodel.*;import org.apache.poi.xssf.usermodel.XSSFWorkbook;import org.springframework.core.io.ClassPathResource;import org.springframework.http.ResponseEntity;import org.springframework.web.bind.annotation.*;import org.springframework.web.multipart.MultipartFile;import java.io.File;import java.io.FileInputStream;import java.io.FileOutputStream;import java.io.IOException;import java.util.ArrayList;import java.util.List;@RestControllerpublic class ExcelController {private Workbook workbook;private Sheet sheet;public ExcelController() throws IOException {workbook = new XSSFWorkbook(new ClassPathResource("sample.xlsx").getInputStream());sheet = workbook.getSheetAt(0);}@GetMapping("/api/excel/preview")public List<List<String>> previewExcel() {List<List<String>> data = new ArrayList<>();for (Row row : sheet) {List<String> rowData = new ArrayList<>();for (Cell cell : row) {rowData.add(getCellValueAsString(cell));}data.add(rowData);}return data;}@PostMapping("/api/excel/edit")public ResponseEntity<String> editExcel(@RequestParam("row") int row,@RequestParam("column") int column,@RequestParam("value") String value) {Row r = sheet.getRow(row);if (r == null) {r = sheet.createRow(row);}Cell c = r.getCell(column);if (c == null) {c = r.createCell(column);}c.setCellValue(value);try {FileOutputStream fileOut = new FileOutputStream("target/sample.xlsx");workbook.write(fileOut);fileOut.close();} catch (IOException e) {return ResponseEntity.badRequest().body("Error saving changes.");}return ResponseEntity.ok("Changes saved successfully.");}private String getCellValueAsString(Cell cell) {switch (cell.getCellType()) {case STRING:return cell.getStringCellValue();case NUMERIC:return String.valueOf(cell.getNumericCellValue());default:return "";}}}

前端 - Vue 3 + Vuetify

  • 为了简化前端的表格编辑,可以使用Vuetify这样的框架,它提供了丰富的UI组件。
  • 创建Vue 3项目,使用Vite或Vue CLI创建项目。

安装Vuetify和Axios:

   npm install vuetify axios

创建组件

   <template><v-data-table:headers="headers":items="rows":items-per-page="10"item-key="id"show-expandsingle-expanddensefixed-headerheight="600"@update:items="onUpdateItems"><template v-slot:item="{ item }"><tr><td v-for="(cell, index) in item" :key="index"><input type="text" :value="cell" @change="handleCellChange($event, item, index)"></td></tr></template></v-data-table></template><script setup>javascript">import axios from 'axios';const { data, pending } = await useAsyncData('excel-preview', () => {return axios.get('/api/excel/preview').then(response => response.data);});const headers = computed(() => data.value ? data.value[0] : []);const rows = computed(() => data.value ? data.value.slice(1) : []);function handleCellChange(event, row, index) {const newRow = [...rows.value];newRow[row.index][index] = event.target.value;updateRows(newRow);}function updateRows(rows) {axios.post('/api/excel/edit', {row: rows[0].index,column: 0,value: rows[0][0]}).then(response => {console.log(response.data);}).catch(error => {console.error(error);});}</script>

注意事项

  • 这个示例中的编辑功能非常基础,仅支持修改单个单元格的值。对于更复杂的编辑需求,如公式计算、图表、样式等,可能需要使用专门的在线表格编辑库,如SheetJS或ag-Grid。
  • 编辑功能中,每次只更新一个单元格,实际应用中可能需要批量更新多个单元格,以减少与服务器的交互次数。
  • 本示例中,编辑后的Excel文件直接保存到服务器的target目录下,实际应用中应考虑更安全的数据存储方案,如数据库或对象存储服务。
  • 考虑到性能和用户体验,对于大型Excel文件,可能需要实现分页加载和异步数据更新机制

http://www.ppmy.cn/server/90736.html

相关文章

【java】力扣 反转字符串中的单词

目录 题目描述题目描述思路代码 题目描述 151.反转字符串中的单词 题目描述 思路 主要是利用快慢指针和字符串的截取 还要了解去掉首尾空格的函数是trim 那s"the sky is blue"举例 这个例子是没有首尾空格的&#xff0c;以防万一&#xff0c;我们不管有没有&#…

vite5.x+arcoDesign+vue3 setup仿macos/windows桌面网页os系统演示

vue3-arco-webos&#xff1a;原创研发vite5vue3arco-designsortablejsecharts搭建pc版webos管理系统。自研桌面栅格化布局引擎、支持桌面图标自由拖拽、多页分屏管理、自定义桌面皮肤、虚化UI质感等功能。 vue3-macos&#xff1a;原创vite5pinia2arco-design网页版os系统 vue3-…

vue3——两种利用自定义指令实现防止按钮重复点击的方法

方法一&#xff1a;利用定时器设置时间&#xff0c;下方代码设置时间为1秒 但是有个缺点&#xff1a;请求如果很慢&#xff0c;1秒钟还没有好&#xff0c;那么该方法就没用了 // 利用定时器&#xff1a;1秒之后才能再次点击app.directive(preventReClick, {mounted: (el, bind…

前端安全:CSRF 和 XSS 攻击介绍 以及 如何解决

CSRF (Cross-Site Request Forgery) 介绍: 跨站请求伪造&#xff08;CSRF&#xff09;是一种攻击方式&#xff0c;攻击者诱导用户在已认证的应用中执行未授权的操作。通常&#xff0c;攻击者会通过伪造的请求在受害者不知情的情况下执行这些操作。 解决方案: 使用CSRF令牌&am…

并发 -------- 2.3 进程间的通信 - 消息队列

前言&#xff1a;进程间的通信方式包括 IPC: 1、管道 pipe 无名管道 fifo 有名管道 2、信号 signal 3、消息队列 System V消息队列 / POSIX消息队列 <----------- 4、共享…

手摸手教你撕碎西门子S7通讯协议02--socket连接

1、S7协议通讯流程回顾 1&#xff09;建立Socket连接&#xff1a;进行TCP三次握手 这里是指要建立socket的tcp连接&#xff0c;是tcp连接而不是udp连接&#xff0c;tcp连接是可靠连接&#xff0c;tcp连接就是要有稳定的IP地址&#xff0c;它是通过字节方式进行通讯&#xff…

2024.7.25(Git、gitlab以及分支管理)

分布式版本控制系统 一、Git概述 Git 是一种分布式版本控制系统,用于跟踪和管理代码的变更。它是由Linus Torvalds创建的,最 初被设计用于Linux内核的开发。Git允许开发人员跟踪和管理代码的版本,并且可以在不同的开发人员之间进行协作。 Github 用的就是Git系统来管理它们的…

有http了为何还要用socket通讯

文章目录 应用场景区别总结 HTTP和WebSocket是两种不同的协议&#xff0c;‌它们各自有不同的用途和优势&#xff0c;‌因此即使有了HTTP&#xff0c;‌还需要WebSocket进行通讯。‌ 应用场景区别 HTTP是一种无状态的、‌单向的协议&#xff0c;‌主要用于从服务器获取信息&…

在Vue程序中,如何检测用户的登录状态并跳转到对应页面

在一个Vue应用程序中&#xff0c;你可以通过以下步骤来检测用户的登录状态并跳转到对应的页面。假设你使用的是Vue Router来管理路由&#xff0c;并且用户的登录状态保存在Vuex或localStorage中。 步骤一&#xff1a;在Vuex中管理用户的登录状态 首先&#xff0c;确保你在Vue…

面试官没想到一个ArrayList,我都能跟他扯半小时

点赞再看&#xff0c;Java进阶一大半 南哥在stackoverflow社区看到14年前的这么一个问题&#xff1a;Java 的 Vector.add() 和 Vector.addElement() 有什么区别&#xff0c;大家有答案吗&#xff1f; 它们实际上没有区别&#xff01;&#xff01;&#xff01;1996年的JDK 1.0版…

C#体检系统源码,医院健康体检系统PEIS,C#+VS2016+SQLSERVER

体检中心/医院体检科PEIS系统源码&#xff0c;C#健康体检信息系统源码&#xff0c;PEIS源码 开发环境&#xff1a;C/S架构C#VS2016SQLSERVER 2008 检前&#xff1a; 多种预约方式网站预约、电话预约、微信平台预约及检前沟通&#xff0c;提前制作套餐&#xff0c;客人到达体检…

Elasticsearch概念及ELK安装

1、Elasticsearch是什么 它是elastic技术栈中的一部分。完整的技术栈包括&#xff1a; Elasticsearch&#xff1a;用于数据存储、计算和搜索 Logstash/Beats&#xff1a;用于数据收集 Kibana&#xff1a;用于数据可视化 整套技术栈被称为ELK&#xff0c;经常用来做日志收集…

最新Yiso智云搜索引擎系统源码/开源PHP源码/修复版

源码简介&#xff1a; 最新Yiso智云搜索引擎系统源码/开源PHP源码/修复版。Yiso 是一个性能非常好的搜索引擎&#xff0c;不仅免费开源&#xff0c;还能当作收录网址的平台来用呢&#xff01;只需要输入关键词&#xff0c;就能轻松找到相关的搜索结果内容。 1、Yiso 用的是自…

ctc(Connectionist Temporal Classification) 学习

CTC实际上解决了一个问题&#xff0c;狭义的讲&#xff0c;怎么确定一个语音识别网络输出的音素串是否对应一个单词。这个在利用损失函数进行优化的时候是必要的。 一个单词的说法是很多的&#xff0c;有的部分发音长&#xff0c;有的部分发音短&#xff0c;因此一个单词的音素…

Java | Leetcode Java题解之第284题窥视迭代器

题目&#xff1a; 题解&#xff1a; class PeekingIterator<E> implements Iterator<E> {private Iterator<E> iterator;private E nextElement;public PeekingIterator(Iterator<E> iterator) {this.iterator iterator;nextElement iterator.next(…

杂记-镜像

-i https://pypi.tuna.tsinghua.edu.cn/simple 清华 pip intall 出现 error: subprocess-exited-with-error 错误的解决办法———————————pip install --upgrade pip setuptools57.5.0 ————————————————————————————————————…

ctfshow web入门 CMS web477--web479

web477 CMSEazy5.7 不让扫&#xff0c;那就尝试一下admin路由&#xff0c;成功了 admin登录进入后台 也看到了其实 首页可以看到提示 然后去自定义标签打 1111111111";}<?php phpinfo()?>刷新一下预览即可 11";}<?php assert($_POST[g]);?>也可…

mysql面试(五)

前言 本章节从数据页的具体结构&#xff0c;分析到如何生成索引&#xff0c;如何构成B树的索引结构。 以及什么是聚簇索引&#xff0c;什么是联合索引 InnoDB数据结构 行数据 我看各种文档中有好多记录数据结构的&#xff0c;但是这些都是看完就忘的东西。在这里详细讲也没…

NLP: 词袋模型和TFIDF模型

文章目录 词袋模型TF-IDF模型词汇表模型 词袋模型 文本特征提取有两个非常重要的模型&#xff1a; 词集模型&#xff1a;单词构成的集合&#xff0c;集合自然每个元素都只有一个&#xff0c;也即词集中的每个单词都只有一个。 词袋模型&#xff1a;在词集的基础上如果一个单词…

C++ //练习 16.6 你认为接受一个数组实参的标准库函数begin和end是如何工作的?定义你自己版本的begin和end。

C Primer&#xff08;第5版&#xff09; 练习 16.6 练习 16.6 你认为接受一个数组实参的标准库函数begin和end是如何工作的&#xff1f;定义你自己版本的begin和end。 环境&#xff1a;Linux Ubuntu&#xff08;云服务器&#xff09; 工具&#xff1a;vim 代码块 template …