欧美日韩一二三区,原创精品自在线观看,午夜一区伊人高

spreadJS開發實戰：如何通過Vue+SpringBoot實現在線文檔數據填報、協同編輯

翻譯|使用教程|編輯：鮑佳佳|2020-10-12 11:57:16.020|閱讀 575 次

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

SpreadJS 是一款基于 HTML5 的純前端電子表格控件，兼容 450 種以上的 Excel 公式，憑借其 “高性能、跨平臺、與 Excel 高度兼容”的產品特性，備受以華為、蘇寧易購、天弘基金等為代表的企業用戶青睞。SpreadJS 為用戶帶來親切的 Excel 使用體驗的同時，滿足 Web Excel 組件開發、表格文檔協同編輯、數據填報、Excel 類報表設計等業務場景，極大降低了企業研發成本和項目交付風險。更多詳情信息文章教程點擊這里>>

點擊下載SpreadJS最新試用版

在線文檔，顧名思義就是通過在線的方式對文檔進行操作，實現如數據填報、數據計算、可視化、在線導入導出 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 即可安裝，主要有：

"@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",

2、在SpreadJS.vue文件中引入 SpreadJS 相關安裝包：

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

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

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

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

 <MySpreadJS :mySpread=
"mySpread" :filePath="filePath" @done="childDone" :closeSpread='closeSpread'>
</MySpreadJS>

5、 mySpread變量中是從后臺返回的文件流，傳給MySpreadJS組件，子組件接收到數據后，調用excelIO.open方法打開Excel 文件流，

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);
    });
},

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

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