如何在Spring Boot框架下實現高效的Excel服務端匯入匯出?

葡萄城技术团队發表於2024-06-25

前言

Spring Boot是由Pivotal團隊提供的全新框架,其設計目的是用來簡化新Spring應用的初始搭建以及開發過程。該框架使用了特定的方式來進行配置,從而使開發人員不再需要定義樣板化的配置。今天我們就使用純前對按表格控制元件帶大家瞭解,如何在Spring Boot框架下實現Excel服務端匯入匯出。

1.IDEA建立SpringBoot專案

1.1 Spring Initializr

想要在IDEA下快速搭建一個SpringBoot專案,可以使用Spring Initializr工具作為腳手架。

進入IDEA後,在左側選單中可以找到Plugins,點選後,在上方的搜尋框中輸入Spring Initializr。

之後點選右上角的綠色Install按鈕進行安裝。

安裝完畢後,在New Project 的時候就會多一個Spring Initializr的選項。

1.2 SpringBoot 專案的建立

Project SDK:根據實際應用情況選擇用於配置專案所依賴的Java SDK。

Choose Spring Initializr Server:選擇一個Spring Initializr伺服器,一般來說都選擇預設的。

GroupId:一般分為多個段,第一段為域,第二段為公司名稱。例如:org.apache,com.grapecity。

ArtifactId:是專案的唯一識別符號,在實際開發中一般對應專案的名稱,就是專案根目錄的名稱。

Group Id,Artfact Id是保證專案唯一性的標識,一般來說如果專案打包上傳至maven這樣的包管理倉庫中。在搜尋你的專案時,Group Id,Artfact Id是必要的條件。

Version:版本號,預設0.0.1-SNAPSHOT。SNAPSHOT代表不穩定的版本,與之相對的有RELEASE。

Project type:工程的型別,maven工程還是gradle工程。

Language:語言(Java,Kotlin,Groovy)。

Packaging:Jar包還是War包。

Java version:語法版本,與Project SDK不同,Project SDK是實際用到的JDK。Java version指的是語法版本。一般來說語言特性不能比SDK高。比如SDK版本是11,語法選擇8。那麼實際專案中只能使用java 8的語法。反之SDK版本是8,語法選11就有問題了。一般情況下都會與SDK保持一致。

Project name:專案名稱

Project description:專案描述

Package name:包名

第三部分根據專案的實際需求去配置。

第四部分:

設定專案名稱與路徑。

2.前端配置

考慮到匯入匯出功能需要對Excel具有較高的還原度,這裡使用了SpreadJS元件,透過SpreadJS元件的ExcelIO功能,進行Excel的匯入與匯出。SpreadJS是一款純前端的元件,與後端完全解耦,可以完美的整合到SpringBoot工程中。

2.1 前端頁面建立

在static目錄下建立index.html檔案,用來繪製前端頁面。如果用了thymeleaf也可以將檔案建立在templates目錄中。

2.1 SpreadJS元件引入和初始化

在header中引入SpreadJS相關的css與js引用。

建立SpreadJS對應的DOM物件。

在JS中初始化SpreadJS和匯入匯出Excel相關的ExcelIO物件。

透過按鈕點選進行服務端匯入與匯出。

匯入匯出事件處理,在事件中傳送請求與服務端進行連線。

匯入原理:

將服務端的檔案以檔案流的形式傳輸至前端,前端透過ExcelIO將結果匯入結果呈現值SpreadJS中,所以匯入的傳遞的引數是一個檔案路徑。注意該路徑是檔案在服務端或者工程中的一個路徑。

匯出原理:

透過SpreadJS ExcelIO的功能將內容匯出成Excel的blob流。之後將blob流傳至伺服器端,在伺服器端進行儲存Excel檔案的操作。

3.後端配置

建立後端controller,可按照自身專案的包的層級分類進行建立。

構建服務端的匯入匯出方法和相關邏輯。

伺服器端匯入:

由於前端傳入的是一個檔案的路徑,所以引數這裡我們需要一個字串型別的引數去接收。

另外,我們會將流傳到前端,所以會將流寫到response中,所以引數中還需要response物件,方法本身不需要返回,返回空即可。原理是透過inputStream讀取檔案後,將其寫入response的outputStream中。

匯出到伺服器:

由於前端傳入傳入的是儲存檔案的名稱以及檔案blob檔案流。伺服器端需要兩個引數,String用來接收檔名稱,MultipartFile物件用來接收blob檔案流。後端接受到檔案流之後透過transferTo方法在指定目錄下根軍傳來的fileName轉存成新的檔案。

4.測試執行

將工程跑起來之後進入主頁面,顯示如下:

點選服務端匯入按鈕,從伺服器端下載指定的Excel檔案並開啟。

對該檔案進行操作修改並點選服務端匯出的按鈕。

之後我們去伺服器端的匯出路徑下檢視,發下檔案存在,用Excel開啟檔案後發現,修改後的內容健在並且其他內容顯示均無問題。

到這裡我們就實現了Spring Boot框架下實現Excel服務端匯入匯出,如果您想了解更多資訊,歡迎點選這裡檢視。

擴充閱讀

React + Springboot + Quartz,從0實現Excel報表自動化

電子表格也能做購物車?簡單三步就能實現

使用純前端類Excel表格控制元件SpreadJS構建企業現金流量表

相關文章