在Vue+SpringBoot应用中实现导入导出excel表功能全过程

 更新时间:2025年10月09日 10:55:06   作者:江小白12138  
这篇文章主要介绍了如何在Vue+SpringBoot应用中实现Excel导入导出功能,前端分三步下载模板、上传文件、调用接口,后端通过FastExcel读取数据并调用UserDao插入,使用/user/importUsers接口完成数据交互,需要的朋友可以参考下

如何在Vue+SpringBoot应用中导入导出excel表

今天,人超级好的组长交给我一个任务,让我完成导入导出用户列表的功能。

后端

1.控制层写导入导出的接口

2.Service层写导入导出的具体方法

以下是导入数据的代码,要用到FastExcel读取数据后,再调用UserDao进行数据的插入

public ResponseDTO<String> importUsers(MultipartFile file){
    List<UserImportForm> dataList;
    try{
        dataList = FastExcel.read(file.getInputStream()).head(UserImportForm.class)
                .sheet()
                .doReadSync();
        for(UserImportForm userImportForm:dataList){
            UserEntity userEntity = SmartBeanUtil.copy(userImportForm,UserEntity.class);
            userDao.insert(userEntity);
        }
    }catch(IOException e){
        log.error(e.getMessage(),e);
        throw new BusinessException("数据格式存在问题,无法读取");
    }
    if(CollectionUtils.isEmpty(dataList)){
        return ResponseDTO.userErrorParam("数据为空");
    }
    return ResponseDTO.okMsg("成功导入"+dataList.size()+"条,具体数据为:"+ JSON.toJSONString(dataList));
}

前端

1.分为三步

2.第一步下载模板

<a-button @click="downloadExcel"> <download-outlined />第一步:下载模板</a-button>

直接将excel表单放在static文件夹下就可以了,前端就可以直接下载表单

function downloadExcel(){
  window.open('http://localhost:1024/user.xlsx');
}

3.第二步选择文件

4.第三步开始导入

<a-button @click="onImportUsers">
  <ImportOutlined />
  第三步:开始导入
</a-button>

中间调用后端提供的接口/user/importUsers就可

async function onImportUsers(){
  const formData = new FormData();
  fileList.value.forEach((file)=>{
    formData.append('file',file.originFileObj);
  });
  SmartLoading.show();
  try{
    let res = await userApi.importUsers(formData);
    message.success(res.msg);
  }catch(e){
    smartSentry.captureError(e);
  }finally {
    SmartLoading.hide();
  }
}

以上就是在Vue+SpringBoot应用中实现导入导出excel表功能全过程的详细内容,更多关于Vue SpringBoot导入导出excel表的资料请关注脚本之家其它相关文章!

相关文章

  • 如何实现无感刷新token

    如何实现无感刷新token

    这篇文章主要介绍了如何实现无感刷新token,当token过期的时候,刷新token,前端需要做到无感刷新token,即刷token时要做到用户无感知,避免频繁登录。下面我们大家一起进入文章看看实现思路即详细内容,需要的朋友可以参考一下
    2021-11-11
  • vue的$http的get请求要加上params操作

    vue的$http的get请求要加上params操作

    这篇文章主要介绍了vue的$http的get请求要加上params操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • element的el-upload组件上传文件跨域问题的几种解决

    element的el-upload组件上传文件跨域问题的几种解决

    跨域问题网上搜索很多,感觉情况都不一样,本文主要介绍了element的el-upload组件上传文件跨域问题的几种解决,具有一定的参考价值,感兴趣的可以了解一下
    2024-03-03
  • Vue使用VueUse实现开发效率提升指南

    Vue使用VueUse实现开发效率提升指南

    VueUse/Core 是一个基于 Composition API 的Vue实用函数集合,它提供了一系列可复用的组合式函数,涵盖了常见的开发需求,下面小编来和大家讲讲它的具体应用吧
    2025-05-05
  • Antd下拉选择,自动匹配功能的实现

    Antd下拉选择,自动匹配功能的实现

    这篇文章主要介绍了Antd下拉选择,自动匹配功能的实现,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • elementUI table表格动态合并的示例代码

    elementUI table表格动态合并的示例代码

    这篇文章主要介绍了elementUI table表格动态合并的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • Vue2安装使用MonacoEditor方式(自定义语法,自定义高亮,自定义提示)

    Vue2安装使用MonacoEditor方式(自定义语法,自定义高亮,自定义提示)

    这篇文章主要介绍了Vue2安装使用MonacoEditor方式(自定义语法,自定义高亮,自定义提示),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • 关于全局安装vue-cli遇到的问题及解决

    关于全局安装vue-cli遇到的问题及解决

    这篇文章主要介绍了关于全局安装vue-cli遇到的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • 一文详解Vue中的虚拟DOM与Diff算法

    一文详解Vue中的虚拟DOM与Diff算法

    vue中的diff算法时常是面试过程中的考点,本文将为大家讲解何为diff以及diff算法的实现过程,那么在了解diff之前,我们需要先了解虚拟DOM是什么,需要的朋友可以参考下
    2024-02-02
  • vue根据值给予不同class的实例

    vue根据值给予不同class的实例

    今天小编就为大家分享一篇vue根据值给予不同class的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09

最新评论