SpreadJS v13.2正式版下載

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

國(guó)內(nèi)外常見(jiàn)的在線(xiàn)文檔，包括：微軟Office Online、Google文檔、石墨文檔、騰訊文檔、飛書(shū)、語(yǔ)雀等。

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

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

可以說(shuō)，只要滿(mǎn)足了上述需求，就可以開(kāi)發(fā)出一款優(yōu)秀的在線(xiàn)文檔。而SpreadJS純前端表格控件，恰好滿(mǎn)足。

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

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

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

如下是系統(tǒng)運(yùn)行截圖。進(jìn)入頁(yè)面（File List的展示文件均為服務(wù)器上的文件）：

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

雙擊文件夾：

點(diǎn)擊某個(gè) Excel文件，打開(kāi)編輯文件的彈框：

在線(xiàn)對(duì)Excel文件進(jìn)行修改、刪除：

技術(shù)棧

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

關(guān)鍵步驟

1、 實(shí)現(xiàn)該系統(tǒng)的相關(guān)依賴(lài)包都寫(xiě)在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",

2、 在 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";

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

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

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

5、 mySpread變量中是從后臺(tái)返回的文件流，傳給MySpreadJS組件，子組件接收到數(shù)據(jù)后，調(diào)用excelIO.open方法打開(kāi)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、 在線(xiàn)編輯Excel文件，并保存。借助excelIO.save方法可以將修改后的文件流傳給后臺(tái)，實(shí)現(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);
}
);

后臺(tái)接口介紹

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

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

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

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

保存文件：savefile

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

刪除文件：deletefile

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

以上就是Vue+SpringBoot+SpreadJS 實(shí)現(xiàn)的一個(gè)簡(jiǎn)單的在線(xiàn)文檔，如需了解詳細(xì)的實(shí)現(xiàn)步驟，請(qǐng)下載。

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

SpreadJS v13.2 | 下載試用

SpreadJS 是一款基于 HTML5 的純前端電子表格控件，兼容 450 種以上的 Excel 公式，憑借其 “高性能、跨平臺(tái)、與 Excel 高度兼容”的產(chǎn)品特性，備受以華為、蘇寧易購(gòu)、天弘基金等為代表的企業(yè)用戶(hù)青睞。SpreadJS 為用戶(hù)帶來(lái)親切的 Excel 使用體驗(yàn)的同時(shí)，滿(mǎn)足 Web Excel 組件開(kāi)發(fā)、表格文檔協(xié)同編輯、數(shù)據(jù)填報(bào)、Excel 類(lèi)報(bào)表設(shè)計(jì)等業(yè)務(wù)場(chǎng)景，極大降低了企業(yè)研發(fā)成本和項(xiàng)目交付風(fēng)險(xiǎn)。

本文轉(zhuǎn)載自

購(gòu)正版 SpreadJS授權(quán)限時(shí)優(yōu)惠！最高立減萬(wàn)元！點(diǎn)擊了解更多優(yōu)惠