“造極”如今已成為蘇寧集團(tuán)的年度核心關(guān)鍵詞。“造極”在具體工作上的體現(xiàn)，代表著蘇寧不斷追求極致的工匠精神，即對(duì)待每一個(gè)環(huán)節(jié)，都要嚴(yán)格要求、精益求精。“極客辦公”系統(tǒng)，正是在這種環(huán)境下應(yīng)運(yùn)而生。

　　本期公開(kāi)課，葡萄城特邀蘇寧易購(gòu)系統(tǒng)架構(gòu)師——候健，為我們深入講解：如何在Vue腳手架工程中，整合SpreadJS純前端表格控件與在線(xiàn)表格編輯器源碼，實(shí)現(xiàn)Web版全功能Excel的具體實(shí)踐。

· 點(diǎn)此查看視頻回放：https://www.grapecity.com.cn/support/webinars

　　蘇寧易購(gòu)集團(tuán)股份有限公司(簡(jiǎn)稱(chēng)“蘇寧易購(gòu)”)成立于1990年，是中國(guó)領(lǐng)先的O2O智慧零售商。面對(duì)互聯(lián)網(wǎng)、物聯(lián)網(wǎng)、大數(shù)據(jù)時(shí)代，蘇寧易購(gòu)持續(xù)推進(jìn)智慧零售和線(xiàn)上線(xiàn)下融合戰(zhàn)略，主打全品類(lèi)經(jīng)營(yíng)、全渠道運(yùn)營(yíng)、全球化拓展，開(kāi)放物流云、數(shù)據(jù)云和金融云，通過(guò)門(mén)店端、PC端、移動(dòng)端和家庭端的四端協(xié)同，為用戶(hù)帶來(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ò)在線(xiàn)填報(bào)的方式匯總、審批、合并數(shù)據(jù)，以達(dá)到實(shí)時(shí)管控、協(xié)同辦公的目的。

　　了解更多關(guān)于 SpreadJS 純前端表格控件：https://www.grapecity.com.cn/developer/spreadjs

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

　　“極客辦公平臺(tái)”是蘇寧易購(gòu)全新的內(nèi)部管理系統(tǒng)，該系統(tǒng)使用SpreadJS完成了Web端Excel 數(shù)據(jù)交互、在線(xiàn)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)模板，如字段名稱(chēng)、數(shù)據(jù)類(lèi)型、必填項(xiàng)等。填報(bào)端主要負(fù)責(zé)用戶(hù)填報(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、在線(xiàn)表格編輯器

　　在開(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的插件和在線(xiàn)表格編輯器，因此該區(qū)域顯示為一塊灰色的DIV)：

　　集成 SpreadJS 純前端表格控件與在線(xiàn)表格編輯器

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

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

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

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

　　其實(shí)通過(guò)Vue的官方說(shuō)明，就可以理解：首先，assets文件夾和static文件夾在vue-cli生成的項(xiàng)目中，都是用來(lái)存放靜態(tài)資源的。assets目錄中的文件會(huì)被webpack處理解析為模塊依賴(lài)，并只支持相對(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以及在線(xiàn)表格編輯器資源引入成功了。

　　從 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 純前端表格控件和在線(xiàn)表格編輯器與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 與在線(xiàn)表格編輯器的應(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均可提供巨大幫助。

　　OK，今天的分享就到這里，大家可以自行前往SpreadJS官網(wǎng)下載體驗(yàn)，同時(shí)也可以在這里觀(guān)看本次課程回放。

　　SpreadJS官網(wǎng)訪(fǎng)問(wèn)：https://www.grapecity.com.cn/developer/spreadjs

特別提醒：本網(wǎng)內(nèi)容轉(zhuǎn)載自其他媒體，目的在于傳遞更多信息，并不代表本網(wǎng)贊同其觀(guān)點(diǎn)。其原創(chuàng)性以及文中陳述文字和內(nèi)容未經(jīng)本站證實(shí)，對(duì)本文以及其中全部或者部分內(nèi)容、文字的真實(shí)性、完整性、及時(shí)性本站不作任何保證或承諾，并請(qǐng)自行核實(shí)相關(guān)內(nèi)容。本站不承擔(dān)此類(lèi)作品侵權(quán)行為的直接責(zé)任及連帶責(zé)任。如若本網(wǎng)有任何內(nèi)容侵犯您的權(quán)益，請(qǐng)及時(shí)聯(lián)系我們，本站將會(huì)在24小時(shí)內(nèi)處理完畢。