在Vue+SpringBoot應用中實現(xiàn)導入導出excel表功能全過程
如何在Vue+SpringBoot應用中導入導出excel表
今天,人超級好的組長交給我一個任務,讓我完成導入導出用戶列表的功能。

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

2.Service層寫導入導出的具體方法
以下是導入數(shù)據(jù)的代碼,要用到FastExcel讀取數(shù)據(jù)后,再調用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>
中間調用后端提供的接口/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應用中實現(xiàn)導入導出excel表功能全過程的詳細內容,更多關于Vue SpringBoot導入導出excel表的資料請關注腳本之家其它相關文章!
相關文章
element的el-upload組件上傳文件跨域問題的幾種解決
跨域問題網(wǎng)上搜索很多,感覺情況都不一樣,本文主要介紹了element的el-upload組件上傳文件跨域問題的幾種解決,具有一定的參考價值,感興趣的可以了解一下2024-03-03
Vue使用VueUse實現(xiàn)開發(fā)效率提升指南
VueUse/Core?是一個基于?Composition?API?的Vue實用函數(shù)集合,它提供了一系列可復用的組合式函數(shù),涵蓋了常見的開發(fā)需求,下面小編來和大家講講它的具體應用吧2025-05-05
elementUI table表格動態(tài)合并的示例代碼
這篇文章主要介紹了elementUI table表格動態(tài)合并的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
Vue2安裝使用MonacoEditor方式(自定義語法,自定義高亮,自定義提示)
這篇文章主要介紹了Vue2安裝使用MonacoEditor方式(自定義語法,自定義高亮,自定義提示),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-04-04

