Vue+SpringBoot+SpreadJS 實現(xiàn)的在線文檔

在線文檔，顧名思義就是通過在線的方式對文檔進行操作，實現(xiàn)如數(shù)據(jù)填報、數(shù)據(jù)計算、可視化、在線導入導出 Excel 文件、自定義系統(tǒng)外觀、工具欄、在網(wǎng)頁內(nèi)滿足單人或多人編輯并將文件上傳至服務(wù)端保存的功能。

國內(nèi)外常見的在線文檔，包括：微軟Office Online、Google文檔、石墨文檔、騰訊文檔、飛書、語雀等。點擊此處，了解這些軟件產(chǎn)品的功能對比

通過對比這些軟件產(chǎn)品，可以將它們的主要功能點，概括為三個層面：數(shù)據(jù)填報、協(xié)同編輯和類Excel的呈現(xiàn)方式。

• 數(shù)據(jù)填報：支持在線導入導出 Excel、大數(shù)據(jù)量填報、填報暫存、多 sheet 填報、多級上報
• 協(xié)同編輯：支持多人協(xié)作、實時編輯、數(shù)據(jù)同步、多級上報、歷史查詢
• 類Excel的呈現(xiàn)方式：提供類Excel的操作模式和使用體驗，兼容Excel數(shù)據(jù)結(jié)構(gòu)

可以說，只要滿足了上述需求，就可以開發(fā)出一款優(yōu)秀的在線文檔。

而SpreadJS純前端表格控件，恰好滿足。

下面，我們就通過Spring Boot + Vue.js的前后分離開發(fā)技術(shù)，演示如何借助 SpreadJS 搭建一款簡單的在線文檔系統(tǒng)。

在線文檔系統(tǒng)示例

該系統(tǒng)集成了SpreadJS表格控件，目前已經(jīng)實現(xiàn)了在線讀取、編輯Excel 文檔的功能，文末提供了示例代碼下載，大家可以按照 Readme文檔中的步驟運行。

PS：歡迎大家前往SpreadJS 產(chǎn)品官網(wǎng)，了解并學習這款純前端表格組件，以實現(xiàn)更多在線文檔的功能。

如下是系統(tǒng)運行截圖。

進入頁面（File List的展示文件均為服務(wù)器上的文件）：

單擊 Excel文件，右側(cè)會顯示該文件的詳細信息：

雙擊文件夾：

點擊某個 Excel文件，打開編輯文件的彈框：

在線對Excel文件進行修改、刪除：

技術(shù)棧

• 后端：SpringBoot
• 前端：SpreadJS、Vue、ElementUI、Typescript

關(guān)鍵步驟

1. 實現(xiàn)該系統(tǒng)的相關(guān)依賴包都寫在package.json里，執(zhí)行命令 npm install 即可安裝，主要有：

"@grapecity/spread-sheets": "^13.0.5",

"@grapecity/spread-sheets-resources-zh": "^13.0.5",

"@grapecity/spread-sheets-vue": "^13.0.5",

"@grapecity/spread-sheets-pdf": "^13.0.5",

"@grapecity/spread-sheets-print": "^13.0.5",

"@grapecity/spread-sheets-charts": "^13.0.5",

"@grapecity/spread-sheets-shapes": "^13.0.5",

1. 在 SpreadJS.vue文件中引入 SpreadJS 相關(guān)安裝包：

import "@grapecity/spread-sheets-vue";

import * as GC from "@grapecity/spread-sheets";

import "@grapecity/spread-sheets-charts";

import "@grapecity/spread-sheets-shapes";

1. 在App.vue文件中引入 SpreadJS 的樣式文件、中文資源文件：

import '@grapecity/spread-sheets-resources-zh'

import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css'

1. List.vue文件中是主要的頁面邏輯，雙擊文件時彈出彈框，彈框中引入了自定義的組件：

1. mySpread變量中是從后臺返回的文件流，傳給MySpreadJS 組件，子組件接收到數(shù)據(jù)后，調(diào)用excelIO.open方法打開Excel 文件流，

spreadInitHandle: function(spread) {

this.spread = spread;

let self = this;

let excelIO = new http://ExcelIO.IO();

excelIO.open(

this.spreadblob as Blob,

function(json) {

let workbookObj = json;

self.spread.fromJSON(workbookObj);

},

function(e) {

alert(e.errorMessage);});},

1. 在線編輯Excel文件，并保存。借助excelIO.save方法可以將修改后的文件流傳給后臺，實現(xiàn)文件的修改功能：

excelIO.save(

curjson,

function(fileblob) {

let formData = new FormData();

formData.append("filePath", self.filePath);

formData.append("type", "update");

formData.append("excelFile", fileblob);

httpUtils.post("/filemanager/savefile", formData).then(response => {

self.$message({

type: "success",

message: "保存成功!"

});

self.$emit("done");

});},

function(e) {

//process error

console.log(e);});

后臺接口介紹

獲取某路徑下的文件集合：getfolder

• 參數(shù)：path（指明文件夾路徑）

獲取Excel文件內(nèi)容：getFile

• 參數(shù)：filePath（指明文件路徑）

保存文件：savefile

• 參數(shù)：filePath（指明文件路徑）、type（create創(chuàng)建文件、update更新文件）

刪除文件：deletefile

• 參數(shù)：filePath（指明文件路徑）

----

以上就是Vue+SpringBoot+SpreadJS 實現(xiàn)的一個簡單的在線文檔，如需了解詳細的實現(xiàn)步驟，請下載示例代碼。

SpreadJS除提供示例中在線讀取、編輯Excel 文檔的功能外，還提供了Web Excel 組件開發(fā)、數(shù)據(jù)填報、Excel 類報表設(shè)計等功能。除此之外，您還可通過調(diào)用API對SpreadJS進一步擴展，滿足協(xié)同編輯、多級上報、填報暫存等更多場景的業(yè)務(wù)需要，歡迎前往SpreadJS 產(chǎn)品官網(wǎng)，下載試用。