快捷導航

在Vue+SpringBoot應(yīng)用中實現(xiàn)導入導出excel表功能全過程

更新時間：2025年10月09日 10:55:06 作者：江小白12138

這篇文章主要介紹了如何在Vue+SpringBoot應(yīng)用中實現(xiàn)Excel導入導出功能,前端分三步下載模板、上傳文件、調(diào)用接口,后端通過FastExcel讀取數(shù)據(jù)并調(diào)用UserDao插入,使用/user/importUsers接口完成數(shù)據(jù)交互,需要的朋友可以參考下

如何在Vue+SpringBoot應(yīng)用中導入導出excel表

今天，人超級好的組長交給我一個任務(wù)，讓我完成導入導出用戶列表的功能。

后端

1.控制層寫導入導出的接口

2.Service層寫導入導出的具體方法

以下是導入數(shù)據(jù)的代碼，要用到FastExcel讀取數(shù)據(jù)后，再調(diào)用UserDao進行數(shù)據(jù)的插入

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("數(shù)據(jù)格式存在問題，無法讀取");
    }
    if(CollectionUtils.isEmpty(dataList)){
        return ResponseDTO.userErrorParam("數(shù)據(jù)為空");
    }
    return ResponseDTO.okMsg("成功導入"+dataList.size()+"條，具體數(shù)據(jù)為:"+ 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>

中間調(diào)用后端提供的接口/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應(yīng)用中實現(xiàn)導入導出excel表功能全過程的詳細內(nèi)容，更多關(guān)于Vue SpringBoot導入導出excel表的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: