快捷導(dǎo)航

在Vue+SpringBoot應(yīng)用中實(shí)現(xiàn)導(dǎo)入導(dǎo)出excel表功能全過(guò)程

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

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

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

今天，人超級(jí)好的組長(zhǎng)交給我一個(gè)任務(wù)，讓我完成導(dǎo)入導(dǎo)出用戶(hù)列表的功能。

后端

1.控制層寫(xiě)導(dǎo)入導(dǎo)出的接口

2.Service層寫(xiě)導(dǎo)入導(dǎo)出的具體方法

以下是導(dǎo)入數(shù)據(jù)的代碼，要用到FastExcel讀取數(shù)據(jù)后，再調(diào)用UserDao進(jìn)行數(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ù)格式存在問(wèn)題，無(wú)法讀取");
    }
    if(CollectionUtils.isEmpty(dataList)){
        return ResponseDTO.userErrorParam("數(shù)據(jù)為空");
    }
    return ResponseDTO.okMsg("成功導(dǎo)入"+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.第三步開(kāi)始導(dǎo)入

<a-button @click="onImportUsers">
  <ImportOutlined />
  第三步：開(kāi)始導(dǎo)入
</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)用中實(shí)現(xiàn)導(dǎo)入導(dǎo)出excel表功能全過(guò)程的詳細(xì)內(nèi)容，更多關(guān)于Vue SpringBoot導(dǎo)入導(dǎo)出excel表的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: