🌟 前言

歡迎來到我的技術(shù)小宇宙！🌌 這里不僅是我記錄技術(shù)點(diǎn)滴的后花園，也是我分享學(xué)習(xí)心得和項(xiàng)目經(jīng)驗(yàn)的樂園。📚 無論你是技術(shù)小白還是資深大牛，這里總有一些內(nèi)容能觸動(dòng)你的好奇心。🔍

• 🤖 洛可可白：個(gè)人主頁

• 🔥 個(gè)人專欄：?前端技術(shù) ?后端技術(shù)

• 🏠 個(gè)人博客：洛可可白博客

• 🐱 代碼獲取：bestwishes0203

• 📷 封面壁紙：洛可可白wallpaper

前端與后端協(xié)同：實(shí)現(xiàn)Excel導(dǎo)入導(dǎo)出功能

在現(xiàn)代Web應(yīng)用中，Excel文件的導(dǎo)入導(dǎo)出是一個(gè)常見的需求。用戶希望能夠方便地將數(shù)據(jù)導(dǎo)入到系統(tǒng)中，或者將系統(tǒng)數(shù)據(jù)導(dǎo)出到Excel文件中。本文將介紹如何在前端和后端之間實(shí)現(xiàn)這一功能，示例采用Spring Boot和Vue.js技術(shù)棧。

后端依賴

在Spring Boot項(xiàng)目中，我們需要添加EasyExcel依賴來處理Excel文件。EasyExcel是一個(gè)簡單、省內(nèi)存的讀寫Excel的開源工具。

<!-- 導(dǎo)出excel  -->
<dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>3.2.1</version>
</dependency>

后端代碼

導(dǎo)出Excel

//@Operation(summary = "導(dǎo)出數(shù)據(jù)") swagger注解
@PostMapping("exportExcel")
public void exportExcelMenu(HttpServletResponse response) throws IOException {// 設(shè)置響應(yīng)頭信息response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");response.setCharacterEncoding("utf-8");// 編碼文件名，避免中文亂碼String fileName = URLEncoder.encode("輪播圖", StandardCharsets.UTF_8).replaceAll("\\+", "%20");// 獲取數(shù)據(jù)列表List<MenuEntity> list = menuService.list();// 設(shè)置文件名response.setHeader("Content-disposition", "attachment;filename*=" + fileName + ".xlsx");// 使用EasyExcel寫入數(shù)據(jù)到輸出流EasyExcel.write(response.getOutputStream(), MenuEntity.class).sheet("輪播圖") // 指定工作表名稱.doWrite(list); // 執(zhí)行寫入操作
}

導(dǎo)入Excel

//@Operation(summary = "導(dǎo)入數(shù)據(jù)") swagger注解
@PostMapping("/importExcel")
public Result importExcelMenu(MultipartFile file) {try {// 獲取文件輸入流InputStream inputStream = file.getInputStream();// 使用EasyExcel讀取Excel數(shù)據(jù)List<MenuEntity> list = EasyExcel.read(inputStream, MenuEntity.class).sheet() // 讀取第一個(gè)工作表.headRowNumber(1) // 表頭行數(shù).doReadSync(); // 同步讀取數(shù)據(jù)// 處理導(dǎo)入的數(shù)據(jù)for (MenuEntity entity : list) {menuService.saveOrUpdate(entity);}// 返回成功結(jié)果return Result.success("導(dǎo)入成功", sdf.format(new Date()));} catch (IOException exception) {throw new RuntimeException(exception);}
}

前端請求

導(dǎo)入數(shù)據(jù)

export function importExcelMenu(file: object): Promise<ImportExcelMenuRes> {return request.post(`/menuEntity/importExcel`, file);
}

導(dǎo)出數(shù)據(jù)

export function exportExcelMenu(): Promise<ExportExcelMenuRes> {return request.post(`/menuEntity/exportExcel`, {}, {responseType: 'arraybuffer', // 設(shè)置響應(yīng)類型為二進(jìn)制流headers: {'Content-Type': 'application/octet-stream'} // 設(shè)置請求頭});
}

前端調(diào)用請求

導(dǎo)入操作

const importChangeExcel = (file) => {// 限制文件類型if (file.raw.type !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {ElMessage.error('僅支持 .xlsx 格式的文件');return false;}importData.value.append('file', file.raw);
};const GlobalImport = () => {// 執(zhí)行導(dǎo)入操作api.menu.importExcelMenu(importData.value).then((res: any) => {ElMessage({message: res.message, type: res.success ? 'success' : 'error'});});
};

導(dǎo)出操作

const GlobalExport = () => {// 執(zhí)行導(dǎo)出操作api.menu.exportExcelMenu().then((res: any) => {// 創(chuàng)建下載鏈接并觸發(fā)下載const link = document.createElement('a');const fileName = "菜單表.xlsx";let blob = new Blob([res], {type: 'application/vnd.ms-excel'});link.href = URL.createObjectURL(blob);link.download = fileName;document.body.appendChild(link);link.click();document.body.removeChild(link);});
};

注意

1. 導(dǎo)入數(shù)據(jù)的接口中，相當(dāng)于使用@RequestBody注解獲取數(shù)據(jù)：

   export function importExcelMenu(file: object): Promise<ImportExcelMenuRes> {return request.post(`/menuEntity/importExcel`, file);
   }
   

2. 導(dǎo)出數(shù)據(jù)的接口中，需要設(shè)置如下請求頭：

   {responseType: 'arraybuffer', // 設(shè)置響應(yīng)類型為二進(jìn)制流headers: {'Content-Type': 'application/octet-stream'} // 設(shè)置請求頭
   }
   

結(jié)語

通過上述示例，我們展示了如何在前端和后端之間實(shí)現(xiàn)Excel文件的導(dǎo)入導(dǎo)出功能。后端通過Spring Boot和EasyExcel處理Excel文件，前端通過Vue.js發(fā)起請求并處理響應(yīng)。這樣的協(xié)同工作使得數(shù)據(jù)的導(dǎo)入導(dǎo)出變得簡單而高效。開發(fā)者可以根據(jù)實(shí)際需求調(diào)整和擴(kuò)展這些代碼，以適應(yīng)不同的業(yè)務(wù)場景。

如果對你有幫助，點(diǎn)贊👍、收藏💖、關(guān)注🔔是我更新的動(dòng)力！👋🌟🚀

🎉 往期精彩回顧

正則表達(dá)式完全指南：語法、用法及JavaScript實(shí)例
正則表達(dá)式與JSON序列化：去除JavaScript對象中的下劃線鍵名
探索async/await的魔力：簡化JavaScript異步編程
JavaScript日期格式化：從原始值到用戶友好的字符串
入門教程：Windows搭建C語言和EasyX開發(fā)環(huán)境
CentOS系統(tǒng)下Docker的安裝教程