🌟 前言
欢迎来到我的技术小宇宙!🌌 这里不仅是我记录技术点滴的后花园,也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛,这里总有一些内容能触动你的好奇心。🔍
🤖 洛可可白:个人主页
🔥 个人专栏:✅前端技术 ✅后端技术
🏠 个人博客:洛可可白博客
🐱 代码获取: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);
});
};
注意
-
导入数据的接口中,相当于使用
@RequestBody
注解获取数据:export function importExcelMenu(file: object): Promise<ImportExcelMenuRes> { 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的安装教程 |