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

🌟 前言

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

• 🤖 洛可可白：个人主页
• 🔥 个人专栏：✅前端技术 ✅后端技术
• 🏠 个人博客：洛可可白博客
• 🐱 代码获取：bestwishes0203
• 📷 封面壁纸：洛可可白wallpaper

文章目录

前端与后端协同：实现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")publicvoidexportExcelMenu(HttpServletResponse response)throwsIOException{// 设置响应头信息
    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")publicResultimportExcelMenu(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);}// 返回成功结果returnResult.success("导入成功", sdf.format(newDate()));}catch(IOException exception){thrownewRuntimeException(exception);}}

前端请求

导入数据

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

导出数据

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

前端调用请求

导入操作

constimportChangeExcel=(file)=>{// 限制文件类型if(file.raw.type !=='application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'){
    ElMessage.error('仅支持 .xlsx 格式的文件');returnfalse;}
  importData.value.append('file', file.raw);};constGlobalImport=()=>{// 执行导入操作
  api.menu.importExcelMenu(importData.value).then((res:any)=>{ElMessage({message: res.message, type: res.success ?'success':'error'});});};

导出操作

constGlobalExport=()=>{// 执行导出操作
  api.menu.exportExcelMenu().then((res:any)=>{// 创建下载链接并触发下载const link = document.createElement('a');const fileName ="菜单表.xlsx";let blob =newBlob([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注解获取数据：exportfunctionimportExcelMenu(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的安装教程