🌟 前言

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

🤖 洛可可白：个人主页

🔥 个人专栏：✅前端技术 ✅后端技术

🏠 个人博客：洛可可白博客

🐱 代码获取：bestwishes0203

📷 封面壁纸：洛可可白wallpaper

文章目录

**🌟 前言**

前端与后端协同：实现Excel导入导出功能后端依赖后端代码导出Excel导入Excel

前端请求导入数据导出数据

前端调用请求导入操作导出操作

注意结语🎉 往期精彩回顾

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

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

后端依赖

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

<code><!-- 导出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发起请求并处理响应。这样的协同工作使得数据的导入导出变得简单而高效。开发者可以根据实际需求调整和扩展这些代码，以适应不同的业务场景。

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

🎉 往期精彩回顾