华邦网站,云图书馆平台网站建设,石家庄网站seo顾问,管庄地区网站建设#x1f31f; 前言 欢迎来到我的技术小宇宙#xff01;#x1f30c; 这里不仅是我记录技术点滴的后花园#xff0c;也是我分享学习心得和项目经验的乐园。#x1f4da; 无论你是技术小白还是资深大牛#xff0c;这里总有一些内容能触动你的好奇心。#x1f50d; #x… 前言 欢迎来到我的技术小宇宙 这里不仅是我记录技术点滴的后花园也是我分享学习心得和项目经验的乐园。 无论你是技术小白还是资深大牛这里总有一些内容能触动你的好奇心。 洛可可白个人主页 个人专栏✅前端技术 ✅后端技术 个人博客洛可可白博客 代码获取bestwishes0203 封面壁纸洛可可白wallpaper 文章目录 ** 前言** 前端与后端协同实现Excel导入导出功能后端依赖后端代码导出Excel导入Excel 前端请求导入数据导出数据 前端调用请求导入操作导出操作 注意结语 往期精彩回顾 前端与后端协同实现Excel导入导出功能
在现代Web应用中Excel文件的导入导出是一个常见的需求。用户希望能够方便地将数据导入到系统中或者将系统数据导出到Excel文件中。本文将介绍如何在前端和后端之间实现这一功能示例采用Spring Boot和Vue.js技术栈。
后端依赖
在Spring Boot项目中我们需要添加EasyExcel依赖来处理Excel文件。EasyExcel是一个简单、省内存的读写Excel的开源工具。
!-- 导出excel --
dependencygroupIdcom.alibaba/groupIdartifactIdeasyexcel/artifactIdversion3.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);// 获取数据列表ListMenuEntity 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数据ListMenuEntity 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): PromiseImportExcelMenuRes {return request.post(/menuEntity/importExcel, file);
}导出数据
export function exportExcelMenu(): PromiseExportExcelMenuRes {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);});
};注意 导入数据的接口中相当于使用RequestBody注解获取数据 export function importExcelMenu(file: object): PromiseImportExcelMenuRes {return request.post(/menuEntity/importExcel, file);
}导出数据的接口中需要设置如下请求头 {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的安装教程
