在線文檔，顧名思義就是通過在線的方式對文檔進行操作，實現如數據填報、數據計算、可視化、在線導入導出 Excel 文件、自定義系統外觀、工具欄、在網頁內滿足單人或多人編輯並將文件上傳至服務端保存的功能。
國內外常見的在線文檔，包括：微軟Office Online、Google文檔、石墨文檔、騰訊文檔、飛書、語雀等。
通過對比這些軟件產品，可以將它們的主要功能點，概括為三個層面：數據填報、協同編輯和類Excel的呈現方式。
· 數據填報：支持在線導入導出 Excel、大數據量填報、填報暫存、多 sheet 填報、多級上報
· 協同編輯：支持多人協作、實時編輯、數據同步、多級上報、歷史查詢
· 類Excel的呈現方式：提供類Excel的操作模式和使用體驗，兼容Excel數據結構
可以說，只要滿足了上述需求，就可以開發出一款優秀的在線文檔。
而SpreadJS純前端表格控件，恰好滿足。
下面，我們就通過Spring Boot + Vue.js的前後分離開發技術，演示如何藉助 SpreadJS 搭建一款簡單的在線文檔系統。
在線文檔系統示例
該系統集成了SpreadJS表格控件，目前已經實現了在線讀取、編輯Excel 文檔的功能，文末提供了示例代碼下載，大家可以按照 Readme文檔中的步驟運行。
PS：歡迎大家前往SpreadJS官網，瞭解並學習這款純前端表格組件，以實現更多在線文檔的功能。
如下是系統運行截圖。
進入頁面（File List的展示文件均為服務器上的文件）：
單擊 Excel文件，右側會顯示該文件的詳細信息：
雙擊文件夾：
點擊某個 Excel文件，打開編輯文件的彈框：
在線對Excel文件進行修改、刪除：
技術棧
· 後端：SpringBoot
· 前端：SpreadJS、Vue、ElementUI、Typescript
關鍵步驟
1. 實現該系統的相關依賴包都寫在package.json裡，執行命令 npm install 即可安裝，主要有：
<code>"@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",/<code>
2. 在 SpreadJS.vue文件中引入 SpreadJS 相關安裝包：
<code>import "@grapecity/spread-sheets-vue";
import * as GC from "@grapecity/spread-sheets";
import "@grapecity/spread-sheets-charts";
import "@grapecity/spread-sheets-shapes";/<code>
3. 在App.vue文件中引入 SpreadJS 的樣式文件、中文資源文件：
<code>import '@grapecity/spread-sheets-resources-zh'
import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css'/<code>
4. List.vue文件中是主要的頁面邏輯，雙擊文件時彈出彈框，彈框中引入了自定義的組件：
<code><myspreadjs>/<code>
5. mySpread變量中是從後臺返回的文件流，傳給MySpreadJS 組件，子組件接收到數據後，調用excelIO.open方法打開Excel 文件流，
<code>spreadInitHandle: function(spread) {
this.spread = spread;
let self = this;
let excelIO = new ExcelIO.IO();
excelIO.open(
this.spreadblob as Blob,
function(json) {
let workbookObj = json;
self.spread.fromJSON(workbookObj);
},
function(e) {
alert(e.errorMessage);});},/<code>6. 在線編輯Excel文件，並保存。藉助excelIO.save方法可以將修改後的文件流傳給後臺，實現文件的修改功能：
<code>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);});/<code>
後臺接口介紹
獲取某路徑下的文件集合：getfolder
· 參數：path（指明文件夾路徑）
獲取Excel文件內容：getFile
· 參數：filePath（指明文件路徑）
保存文件：savefile
· 參數：filePath（指明文件路徑）、type（create創建文件、update更新文件）
刪除文件：deletefile
· 參數：filePath（指明文件路徑）
----
以上就是Vue+SpringBoot+SpreadJS 實現的一個簡單的在線文檔，如需瞭解詳細的實現步驟，請前往GCDN技術社區，下載示例代碼。
SpreadJS除提供示例中在線讀取、編輯Excel 文檔的功能外，還提供了Web Excel 組件開發、數據填報、Excel 類報表設計等功能。除此之外，您還可通過調用API對SpreadJS進一步擴展，滿足協同編輯、多級上報、填報暫存等更多場景的業務需要，歡迎前往SpreadJS官網，下載試用。
關於葡萄城
賦能開發者！葡萄城公司成立於 1980 年，是全球領先的集開發工具、商業智能解決方案、低代碼開發平臺於一身的軟件和服務提供商。西安葡萄城是其在中國的分支機構，面向全球市場提供軟件研發服務，併為中國企業的信息化提供國際先進的開發工具、軟件和研發諮詢服務。葡萄城的控件和軟件產品在國內外屢獲殊榮，在全球被數十萬家企業、學校和政府機構廣泛應用。
閱讀更多 葡萄城GrapeCity 的文章
