前端与后端协同:实现Excel导入导出功能

🌟 前言

欢迎来到我的技术小宇宙!🌌 这里不仅是我记录技术点滴的后花园,也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛,这里总有一些内容能触动你的好奇心。🔍

  • 🤖 洛可可白:个人主页

  • 🔥 个人专栏:✅前端技术 ✅后端技术

  • 🏠 个人博客:洛可可白博客

  • 🐱 代码获取:bestwishes0203

  • 📷 封面壁纸:洛可可白wallpaper

在这里插入图片描述

文章目录

        • **🌟 前言**
  • 前端与后端协同:实现Excel导入导出功能
    • 后端依赖
    • 后端代码
      • 导出Excel
      • 导入Excel
    • 前端请求
      • 导入数据
      • 导出数据
    • 前端调用请求
      • 导入操作
      • 导出操作
    • 注意
    • 结语
    • 🎉 往期精彩回顾

前端与后端协同:实现Excel导入导出功能

在现代Web应用中,Excel文件的导入导出是一个常见的需求。用户希望能够方便地将数据导入到系统中,或者将系统数据导出到Excel文件中。本文将介绍如何在前端和后端之间实现这一功能,示例采用Spring Boot和Vue.js技术栈。

后端依赖

在Spring Boot项目中,我们需要添加EasyExcel依赖来处理Excel文件。EasyExcel是一个简单、省内存的读写Excel的开源工具。

<!-- 导出excel  -->
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>easyexcel</artifactId>
    <version>3.2.1</version>
</dependency>

后端代码

导出Excel

//@Operation(summary = "导出数据") swagger注解
@PostMapping("exportExcel")
public void exportExcelMenu(HttpServletResponse response) throws IOException {
    // 设置响应头信息
    response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
    response.setCharacterEncoding("utf-8");
    // 编码文件名,避免中文乱码
    String fileName = URLEncoder.encode("轮播图", StandardCharsets.UTF_8).replaceAll("\\+", "%20");
    // 获取数据列表
    List<MenuEntity> list = menuService.list();
    // 设置文件名
    response.setHeader("Content-disposition", "attachment;filename*=" + fileName + ".xlsx");
    // 使用EasyExcel写入数据到输出流
    EasyExcel.write(response.getOutputStream(), MenuEntity.class)
            .sheet("轮播图") // 指定工作表名称
            .doWrite(list); // 执行写入操作
}

导入Excel

//@Operation(summary = "导入数据") swagger注解
@PostMapping("/importExcel")
public Result importExcelMenu(MultipartFile file) {
    try {
        // 获取文件输入流
        InputStream inputStream = file.getInputStream();
        // 使用EasyExcel读取Excel数据
        List<MenuEntity> list = EasyExcel.read(inputStream, MenuEntity.class)
                .sheet() // 读取第一个工作表
                .headRowNumber(1) // 表头行数
                .doReadSync(); // 同步读取数据
        // 处理导入的数据
        for (MenuEntity entity : list) {
            menuService.saveOrUpdate(entity);
        }
        // 返回成功结果
        return Result.success("导入成功", sdf.format(new Date()));
    } catch (IOException exception) {
        throw new RuntimeException(exception);
    }
}

前端请求

导入数据

export function importExcelMenu(file: object): Promise<ImportExcelMenuRes> {
    return request.post(`/menuEntity/importExcel`, file);
}

导出数据

export function exportExcelMenu(): Promise<ExportExcelMenuRes> {
    return request.post(`/menuEntity/exportExcel`, {}, {
        responseType: 'arraybuffer', // 设置响应类型为二进制流
        headers: {'Content-Type': 'application/octet-stream'} // 设置请求头
    });
}

前端调用请求

导入操作

const importChangeExcel = (file) => {
  // 限制文件类型
  if (file.raw.type !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
    ElMessage.error('仅支持 .xlsx 格式的文件');
    return false;
  }
  importData.value.append('file', file.raw);
};

const GlobalImport = () => {
  // 执行导入操作
  api.menu.importExcelMenu(importData.value).then((res: any) => {
    ElMessage({message: res.message, type: res.success ? 'success' : 'error'});
  });
};

导出操作

const GlobalExport = () => {
  // 执行导出操作
  api.menu.exportExcelMenu().then((res: any) => {
    // 创建下载链接并触发下载
    const link = document.createElement('a');
    const fileName = "菜单表.xlsx";
    let blob = new Blob([res], {type: 'application/vnd.ms-excel'});
    link.href = URL.createObjectURL(blob);
    link.download = fileName;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  });
};

注意

  1. 导入数据的接口中,相当于使用@RequestBody注解获取数据:

    export function importExcelMenu(file: object): Promise<ImportExcelMenuRes> {
        return request.post(`/menuEntity/importExcel`, file);
    }
    
  2. 导出数据的接口中,需要设置如下请求头:

    {
     responseType: 'arraybuffer', // 设置响应类型为二进制流
     headers: {'Content-Type': 'application/octet-stream'} // 设置请求头
    }
    

结语

通过上述示例,我们展示了如何在前端和后端之间实现Excel文件的导入导出功能。后端通过Spring Boot和EasyExcel处理Excel文件,前端通过Vue.js发起请求并处理响应。这样的协同工作使得数据的导入导出变得简单而高效。开发者可以根据实际需求调整和扩展这些代码,以适应不同的业务场景。

如果对你有帮助,点赞👍、收藏💖、关注🔔是我更新的动力!👋🌟🚀

🎉 往期精彩回顾

正则表达式完全指南:语法、用法及JavaScript实例
正则表达式与JSON序列化:去除JavaScript对象中的下划线键名
探索async/await的魔力:简化JavaScript异步编程
JavaScript日期格式化:从原始值到用户友好的字符串
入门教程:Windows搭建C语言和EasyX开发环境
CentOS系统下Docker的安装教程

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

详解 Redis 在 Ubuntu 系统上的安装

在 Ubuntu 20.04 安装 Redis 1. 先切换到 root 用户 在 Ubuntu 20.04 中&#xff0c;可以通过以下步骤切换到 root 用户&#xff1a; 输入以下命令&#xff0c;以 root 用户身份登录&#xff1a; sudo su -按回车键&#xff0c;并输入当前用户的密码&#xff08;即具有 sudo…

解决nginx代理后,前端拿不到后端自定义的header

先说结论&#xff0c;因为前端和nginx对接&#xff0c;所以需要在nginx添加如下配置向前端暴露header add_header Access-Control-Expose-Headers Authorization 排查过程 1.后端设置了Authorization 的响应头作为token的返回&#xff0c;前后端本地联调没有问题 response.s…

Java_自定义实体类的列表List<T>调用remove()失败讲解

示例1 前提&#xff1a; 新建一个主类Demo1。 需求&#xff1a; 在一个列表中有三条String的数据&#xff0c;想要使用remove(Object o)删掉其中一条。 结果&#xff1a; remove(Object o)成功把数据删掉。 示例2 前提&#xff1a; 新建一个自定义实体类DataExample和一个主…

ObjectiveC-10-OOP面向对象程序设计-分类/类别

类别(Category)是OjectiveC的一个特性&#xff0c;主要目的是让开发者可以以模块的形式向类添加方法&#xff08;扩展&#xff09;&#xff0c;创建标准化的方法列表供给其他人实现。 有些文档也会翻译成类别&#xff0c;其实是一个意思。 概述 语法说明 类别提供了一个简单的…

Vue3从入门到实战:掌握状态管理库pinia(下部分)

1.storeToRefs 在Count.vue文件中 显的冗余了&#xff0c;如何更加优雅简化代码。用storeToRefs 补充&#xff1a; 为什么不用ToRefs呢&#xff1f; 使用的话会将所有数据都用ref引用包裹&#xff0c;其实方法等是没必要包裹的&#xff0c;具有一定风险 2.getters的使用 …

使用Arcpy进行数据批处理-批量裁剪

时空大数据使我们面临前所未有的机遇和挑战&#xff0c;尤其在地学、遥感或空间技术等专业领域&#xff0c;无疑是一个全新的时代。 伴随着时空大数据的到来&#xff0c;海量数据的处理是一个所有科研工作者都无法忽视的重要问题。传统的数据&#xff08;主要指空间数据&#x…

选择企业邮箱,扬帆迈向商务新纪元!

企业邮箱和个人邮箱不同&#xff0c;它的邮箱后缀是企业自己的域名。企业邮箱供应商一般都提供手机app、桌面端、web浏览器访问等邮箱使用途径。那么什么是企业邮箱&#xff1f;如何选择合适的企业邮箱&#xff1f;好用的企业邮箱应具备无缝迁移、协作、多邮箱管理等功能。 企…

后端开发框架Spring Boot快速入门

写在前面 推荐将本文与Spring Boot 相关知识和工具类一文结合起来看&#xff0c;本文为主&#xff0c;上面那篇文章为辅&#xff0c;一起食用&#xff0c;以达到最佳效果&#xff0c;当然&#xff0c;大佬随意。 IDEA创建Spring Boot工程 关于Spring Boot框架项目&#xff0…

Go协程池gopool源码解析

1、gopool简介 Repository&#xff1a;https://github.com/bytedance/gopkg/tree/develop/util/gopool gopool is a high-performance goroutine pool which aims to reuse goroutines and limit the number of goroutines. It is an alternative to the go keyword. gopool的…

数的基础概念

数的基本概念 结点 每一个圆圈就表示一个结点&#xff0c;每个结点里而会存放一些数据(点权值) 边 连接两个结点的一条线&#xff0c;我们认为上面的是父亲&#xff0c;下面的是儿子&#xff0c;边也可以存储权值(边权)。在树中&#xff0c;边的条数严格等于点…

探索未来智慧酒店网项目接口架构

在数字化时代&#xff0c;智慧酒店已成为酒店业发展的重要趋势之一。智慧酒店网项目接口架构作为支撑智慧酒店运营的核心技术之一&#xff0c;其设计和优化对于提升用户体验、提高管理效率具有重要意义。本文将深入探讨智慧酒店网项目接口架构的设计理念和关键要素。 ### 智慧…

备战蓝桥杯---线段树应用2

来几个不那么模板的题&#xff1a; 对于删除&#xff0c;我们只要给那个元素附上不可能的值即可&#xff0c;关键问题是怎么处理序号变化的问题。 事实上&#xff0c;当我们知道每一个区间有几个元素&#xff0c;我们就可以确定出它的位置&#xff0c;因此我们可以再维护一下前…

Unity 代码控制播放序列帧动画的实现

在Unity中有些应用场景的动画是通过序列帧实现的。 如下图即为一个英雄攻击的一个动画&#xff1a; 那么如何实现该序列帧动画的播放呢&#xff0c;我们可以通过代码来控制播放。 1、把以上序列帧导入编辑器中&#xff0c;并修改图片属性&#xff0c;如下图所示&#xff0c;其…

利用Idea实现Ajax登录(maven工程)

一、新建一个maven工程&#xff08;不会建的小伙伴可以参考Idea引入maven工程依赖(保姆级)-CSDN博客&#xff09;&#xff0c;工程目录如图 ​​​​​​​ js文件可以上up网盘提取 链接&#xff1a;https://pan.baidu.com/s/1yOFtiZBWGJY64fa2tM9CYg?pwd5555 提取码&…

UI自动化测试重点思考(上)--元素定位/验证码/测试框架

UI自动化测试重点思考--元素定位 Selenium定位元素selenium中如何判断元素是否存在&#xff1f;定位页面元素webdriver打开页面id定位name定位class_name定位tag_name 定位xpath定位css_selector定位link_text 定位partial_link 定位总结 selenium中元素定位的难点&#xff1f;…

K8S - Deployment 的版本回滚

当前状态 先看deployment rootk8s-master:~# kubectl get deploy -o wide --show-labels NAME READY UP-TO-DATE AVAILABLE AGE CONTAINERS IMAGES …

武汉星起航:深耕全球市场,拓展国际影响力,共赢未来跨境新篇章

在瞬息万变的跨境电商领域&#xff0c;武汉星起航凭借其敏锐的创新意识和卓越的执行力&#xff0c;为行业注入了新的活力。作为一家追求卓越、勇于创新的企业&#xff0c;武汉星起航深知创新是成功的关键。公司通过不断探索新的商业模式、引入先进技术和优化运营流程&#xff0…

【pycharm】在debug循环时,如何快速debug到指定循环次数

【pycharm】在debug循环时&#xff0c;如何快速debug到指定循环次数 【先赞后看养成习惯】求关注收藏点赞&#x1f600; 在 PyCharm 中&#xff0c;可以使用条件断点来实现在特定循环次数后停止调试。这可以通过在断点处右键单击&#xff0c;然后选择 “Add Breakpoint” -&g…

【精品教程】护网HVV实战教程资料合集(持续更新,共20节)

以下是资料目录&#xff0c;如需下载&#xff0c;请前往星球获取&#xff1a; 01-HW介绍.zip 02-HTTP&Burp课程资料.zip 03-信息收集_3.zip 04-SQL注入漏洞_2.zip 05-命令执行漏洞.zip 06-XSS漏洞.zip 07-CSRF.zip 08-中间件漏洞.zip 09-SSRF.zip 10-XXE.zip 11-Java反序列…

2024 最新版 Proteus 8.17 安装汉化教程

前言 大家好&#xff0c;我是梁国庆。 今天给大家带来的是目前 Proteus 的最新版本——Proteus 8.17。 时间&#xff1a;2024年4月4日 获取 Proteus 安装包 我已将本篇所使用的安装包打包上传至百度云&#xff0c;扫描下方二维码关注「main工作室」&#xff0c;后台回复【…