在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表的资料请关注脚本之家其它相关文章!

相关文章

  • Vue Element前端应用开发之菜单资源管理

    Vue Element前端应用开发之菜单资源管理

    在权限管理系统中,菜单也属于权限控制的一个资源,属于角色控制的一环。不同角色用户,登录系统后,出现的系统菜单是不同的。菜单结合路由集合,实现可访问路由的过滤,也就实现了对应角色菜单的展示和可访问路由的控制。
    2021-05-05
  • 基于Vue3制作简单的消消乐游戏

    基于Vue3制作简单的消消乐游戏

    这篇文章主要为大家介绍了如何利用Vue3制作简单的消消乐游戏,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起动手试一试
    2022-05-05
  • vue组件讲解(is属性的用法)模板标签替换操作

    vue组件讲解(is属性的用法)模板标签替换操作

    这篇文章主要介绍了vue组件讲解(is属性的用法)模板标签替换操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • Vue3如何配置多级代理

    Vue3如何配置多级代理

    这篇文章主要介绍了Vue3如何配置多级代理问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-04-04
  • 详解用vue编写弹出框组件

    详解用vue编写弹出框组件

    本篇文章主要介绍了详解用vue编写弹出框组件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • Vue中@click.native的使用方法及场景

    Vue中@click.native的使用方法及场景

    在组件中时常看到@click.native,在项目中遇到后,简单介绍下,这篇文章主要给大家介绍了关于Vue中@click.native的使用方法及场景的相关资料,需要的朋友可以参考下
    2023-11-11
  • Vue实现两个列表之间的数据联动的代码示例

    Vue实现两个列表之间的数据联动的代码示例

    在Vue.js应用开发中,列表数据的联动是一个常见的需求,这种联动可以用于多种场景,例如过滤筛选、关联选择等,本文将详细介绍如何在Vue项目中实现两个列表之间的数据联动,并通过多个具体的代码示例来帮助读者理解其实现过程,需要的朋友可以参考下
    2024-10-10
  • vue3打包h5平板每次都要清缓存的问题及解决

    vue3打包h5平板每次都要清缓存的问题及解决

    这篇文章主要介绍了vue3打包h5平板每次都要清缓存的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-09-09
  • vue实现倒计时获取验证码效果

    vue实现倒计时获取验证码效果

    这篇文章主要为大家详细介绍了vue实现倒计时获取验证码效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • defineProps宏函数不需要从vue中import导入的原因解析

    defineProps宏函数不需要从vue中import导入的原因解析

    这篇文章主要介绍了defineProps宏函数不需要从vue中import导入的原因解析,本文给大家介绍的非常详细,需要的朋友可以参考下
    2024-07-07

最新评论