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

前言

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

• 洛可可白：个人主页

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

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

• 代码获取：bestwishes0203

• 封面壁纸：洛可可白wallpaper

  文章目录

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

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

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

                  后端依赖

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

                      com.alibaba    easyexcel    3.2.1

                  后端代码

                  导出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 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 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 {    return request.post(`/menuEntity/importExcel`, file);}

                  导出数据

                  export function exportExcelMenu(): Promise {    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 {    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的安装教程