本文通過(guò)蘇寧使用SpreadJS開(kāi)發(fā)極客系統(tǒng)的案例講解如何在Vue腳手架工程中，整合SpreadJS純前端表格控件與在線表格編輯器源碼，實(shí)現(xiàn)Web版全功能Excel的具體實(shí)踐。

點(diǎn)擊下載SpreadJS試用版

企業(yè)介紹

蘇寧易購(gòu)集團(tuán)股份有限公司(簡(jiǎn)稱“蘇寧易購(gòu)”)成立于1990年，是中國(guó)領(lǐng)先的O2O智慧零售商。面對(duì)互聯(lián)網(wǎng)、物聯(lián)網(wǎng)、大數(shù)據(jù)時(shí)代，蘇寧易購(gòu)持續(xù)推進(jìn)智慧零售和線上線下融合戰(zhàn)略，主打全品類經(jīng)營(yíng)、全渠道運(yùn)營(yíng)、全球化拓展，開(kāi)放物流云、數(shù)據(jù)云和金融云，通過(guò)門(mén)店端、PC端、移動(dòng)端和家庭端的四端協(xié)同，為用戶帶來(lái)無(wú)處不在的一站式服務(wù)體驗(yàn)。

蘇寧易購(gòu)采購(gòu)SpreadJS 純前端表格控件，主要是為其構(gòu)建基于Web 端 + Vue 集成的Excel數(shù)據(jù)管理系統(tǒng)，即“極客辦公平臺(tái)”，該系統(tǒng)用于收集集團(tuán)內(nèi)部信息數(shù)據(jù)，代替常用的 excel表格，通過(guò)在線填報(bào)的方式匯總、審批、合并數(shù)據(jù)，以達(dá)到實(shí)時(shí)管控、協(xié)同辦公的目的。

蘇寧易購(gòu)“極客辦公平臺(tái)”簡(jiǎn)介

“極客辦公平臺(tái)”是蘇寧易購(gòu)全新的內(nèi)部管理系統(tǒng)，該系統(tǒng)使用SpreadJS完成了Web端Excel 數(shù)據(jù)交互、在線Excel功能開(kāi)發(fā)以及數(shù)據(jù)填報(bào)模塊等功能。

在采購(gòu)SpreadJS 之前，公司管理內(nèi)部信息的辦法是：在Excel上安裝插件，通過(guò)插件與數(shù)據(jù)庫(kù)通信，實(shí)現(xiàn)數(shù)據(jù)權(quán)限管控，這樣做非常的低效且混亂。而新的極客辦公平臺(tái)提供了更加靈活的管理方式和更為親切的辦公體驗(yàn)。

為保證新老系統(tǒng)順利過(guò)渡，需要完成大量的Excel數(shù)據(jù)遷移工作，因此，新老系統(tǒng)對(duì)Excel文件的兼容性至關(guān)重要。借助SpreadJS 純前端無(wú)損導(dǎo)入導(dǎo)出Excel這一產(chǎn)品特性，極客辦公平臺(tái)得以順利完成交付并迅速投入使用。

1.極客辦公平臺(tái)現(xiàn)階段的主要使用場(chǎng)景為人事信息錄入管理，分為管理端和填報(bào)端兩大模塊。

2.管理端負(fù)責(zé)設(shè)計(jì)填報(bào)模板，如字段名稱、數(shù)據(jù)類型、必填項(xiàng)等。填報(bào)端主要負(fù)責(zé)用戶填報(bào)的權(quán)限管控。

3.系統(tǒng)前端生成的Excel模板文件會(huì)通過(guò)json傳遞至后端解析處理，系統(tǒng)根據(jù)模板信息生成數(shù)據(jù)庫(kù)Table并保存。

開(kāi)發(fā)環(huán)境介紹

1. 前端框架：Vue、webpack、vue-cli

2. 表格插件：SpreadJS V12、在線表格編輯器

在開(kāi)發(fā)階段最好引用未壓縮的SpreadJS組件代碼庫(kù)(上圖標(biāo)紅的代碼文件)，這樣可以方便調(diào)試。

使用腳手架搭建標(biāo)準(zhǔn)Vue工程 

創(chuàng)建Vue腳手架工程命令：

項(xiàng)目目錄結(jié)構(gòu)如下：

前端展示界面如下：

點(diǎn)擊【表格頁(yè)面】，此時(shí)呈現(xiàn)的效果如下圖(因?yàn)槟壳盀橹梗覀冞€沒(méi)有集成SpreadJS的插件和在線表格編輯器，因此該區(qū)域顯示為一塊灰色的DIV)：

集成SpreadJS純前端表格控件與在線表格編輯器

SpreadJS在線表格編輯器目錄結(jié)構(gòu)：

Vue工程目錄結(jié)構(gòu)：

與Vue集成步驟：將SpreadJS在線表格編輯器目錄中【src】下的所有文件拷貝到Vue工程目錄的static文件下即可。

這里有個(gè)小問(wèn)題：為什么要把SpreadJS在線表格編輯器的源碼復(fù)制到static目錄，而不是assets目錄?

其實(shí)通過(guò)Vue的官方說(shuō)明就可以理解：首先，assets文件夾和static文件夾在vue-cli生成的項(xiàng)目中，都是用來(lái)存放靜態(tài)資源的。assets目錄中的文件會(huì)被webpack處理解析為模塊依賴，并只支持相對(duì)路徑形式。

而static 目錄下的文件并不會(huì)被Webpack處理：它們會(huì)直接被復(fù)制到最終的打包目錄(默認(rèn)是dist/static)下。必須使用絕對(duì)路徑引用這些文件，這是通過(guò)在 config.js 文件中的 build.assetsPublicPath 和 build.assetsSubDirectory 連接來(lái)確定的。Webpack默認(rèn)將static目錄的文件原原本本地輸出，所以當(dāng)頁(yè)面要使用絕對(duì)路徑時(shí)，資源文件就需要放在static目錄下。

因?yàn)閂ue運(yùn)行起來(lái)并不是靜態(tài)的，我們還需要將static目錄中的index.html文件內(nèi)容，全部拷貝到Vue的入口文件【index.html】中。修改完所有的資源文件路徑后，打開(kāi)項(xiàng)目展示頁(yè)面的控制臺(tái)，我們會(huì)發(fā)現(xiàn)，此時(shí)已經(jīng)將所有的SpreadJS以及在線表格編輯器資源引入成功了。

從index.js分析SpreadJS表格編輯器與插件的加載過(guò)程：

完成上述步驟后，打開(kāi)static目錄中的index.js 文件，將上圖紅框中的三行代碼拷貝到準(zhǔn)備加載插件的組件文件中：components/spreadjs.vue。

spreadjs.vue：

傳統(tǒng)的只集成SpreadJS插件的方式依然有效。

此時(shí)，打開(kāi)項(xiàng)目展示頁(yè)面，發(fā)現(xiàn)SpreadJS插件似乎沒(méi)有被正確加載?

下面，我們將著手解決插件未正確加載的問(wèn)題：從官方提供的index.html文件中，將所有承載SpreadJS表格主體部分的元素，全部拷貝到spreadjs.vue中，替換默認(rèn)的container標(biāo)簽。

打開(kāi)前端展示頁(yè)面，就會(huì)發(fā)現(xiàn)原本灰色的部分，出現(xiàn)了一個(gè)加載動(dòng)畫(huà)。

為了讓Vue正確讀取到spreadWrapper.html和ribbon.html的內(nèi)容，需要修改項(xiàng)目路徑，增加‘static/’根目錄。

asyncLoader.js

完成上述步驟后，頁(yè)面部分會(huì)正常顯示SpreadJS的表格以及底部狀態(tài)欄。

為了讓SpreadJS的菜單欄也正確顯示，還需要修改fileMenu.js的路徑：

fileMenu.js

注意，SpreadJS的菜單工具欄是通過(guò)絕對(duì)定位顯示在頁(yè)面上方的，為了讓菜單工具欄正確顯示，我們還需要調(diào)整SpreadJS工具欄距頁(yè)面頂部的高度(默認(rèn)為top:195px)。

Local.cn.css：

刷新頁(yè)面，最終效果如下：

至此，我們已經(jīng)成功的將SpreadJS 純前端表格控件和在線表格編輯器與Vue框架集成。

修復(fù)再次進(jìn)入頁(yè)面插件時(shí)未加載的問(wèn)題

完成了SpreadJS與Vue的集成后，當(dāng)我們點(diǎn)擊瀏覽器“返回”按鈕，再次進(jìn)入表格編輯器頁(yè)面時(shí)，會(huì)發(fā)現(xiàn)樣式全部錯(cuò)亂：

造成上述問(wèn)題的原因：index.js中的js代碼，并不會(huì)隨著路由的切換而重新執(zhí)行。

為了修復(fù)此問(wèn)題，我們可以：

1. 將插件的源碼加載方式改為ES6

2. 在Vue對(duì)應(yīng)的頁(yè)面組件mount中重新調(diào)用初始化方法

蘇寧使用SpreadJS與在線表格編輯器的應(yīng)用實(shí)踐

這是我們使用SpreadJS純前端表格控件開(kāi)發(fā)的“人才臺(tái)賬”項(xiàng)目應(yīng)用截圖，SpreadJS已經(jīng)幫我們實(shí)現(xiàn)了微軟Office Excel 90%以上的功能，我們只需增加一些UI樣式和下拉框，就可以迅速交付一套完整的基于Web的 Excel功能模塊，對(duì)于提升項(xiàng)目研發(fā)效率、較低后期維護(hù)成本來(lái)說(shuō)，SpreadJS均可提供巨大幫助。

想要獲得 SpreadJS 更多資源的伙伴，請(qǐng)點(diǎn)這里。

想要獲取 SpreadJS 正版授權(quán)的伙伴，