SpreadJS與Vue集成，蘇寧集團『極客辦公』系統開發案例

「造極」現在已成爲蘇寧集團的年度核心關鍵詞。「造極」在具體工做上的體現，表明着蘇寧不斷追求極致的工匠精神，即對待每個環節，都要嚴格要求、精益求精。「極客辦公」系統，正是在這種環境下應運而生。本期公開課，葡萄城特邀蘇寧易購系統架構師——候健，爲咱們深刻講解：如何在Vue腳手架工程中，整合SpreadJS純前端表格控件與在線表格編輯器源碼，實現Web版全功能Excel的具體實踐。

• 點擊此處，觀看視頻回放

 

蘇寧易購集團股份有限公司（簡稱「蘇寧易購」）成立於1990年，是中國領先的O2O智慧零售商。面對互聯網、物聯網、大數據時代，蘇寧易購持續推動智慧零售和線上線下融合戰略，主打全品類經營、全渠道運營、全球化拓展，開放物流雲、數據雲和金融雲，經過門店端、PC端、移動端和家庭端的四端協同，爲用戶帶來無處不在的一站式服務體驗。

 

蘇寧易購採購SpreadJS 純前端表格控件，主要是爲其構建基於Web 端 + Vue 集成的Excel數據管理系統，即「極客辦公平臺」，該系統用於收集集團內部信息數據，代替經常使用的 excel表格，經過在線填報的方式彙總、審批、合併數據，以達到實時管控、協同辦公的目的。

 

蘇寧易購「極客辦公平臺」簡介

「極客辦公平臺」是蘇寧易購全新的內部管理系統，該系統使用SpreadJS完成了Web端Excel 數據交互、在線Excel功能開發以及數據填報模塊等功能。

 

在採購SpreadJS 以前，公司管理內部信息的辦法是：在Excel上安裝插件，經過插件與數據庫通訊，實現數據權限管控，這樣作很是的低效且混亂。而新的極客辦公平臺提供了更加靈活的管理方式和更爲親切的辦公體驗。

 

爲保證新老系統順利過渡，須要完成大量的Excel數據遷移工做，所以，新老系統對Excel文件的兼容性相當重要。藉助SpreadJS 純前端無損導入導出Excel這一產品特性，極客辦公平臺得以順利完成交付並迅速投入使用。

 

1. 極客辦公平臺現階段的主要使用場景爲人事信息錄入管理，分爲管理端和填報端兩大模塊。

 

1. 管理端負責設計填報模板，如字段名稱、數據類型、必填項等。填報端主要負責用戶填報的權限管控。

 

1. 系統前端生成的Excel模板文件會經過json傳遞至後端解析處理，系統根據模板信息生成數據庫Table並保存。

 

開發環境介紹

1. 前端框架：Vue、webpack、vue-cli
2. 表格插件：SpreadJS V十二、在線表格編輯器

 

 

 

在開發階段最好引用未壓縮的SpreadJS組件代碼庫（上圖標紅的代碼文件），這樣能夠方便調試。

 

使用腳手架搭建標準 Vue 工程

建立Vue腳手架工程命令：

 

 

 

 

項目目錄結構以下：

 

 

 

 

前端展現界面以下：

 

 

 

 

點擊【表格頁面】，此時呈現的效果以下圖（由於目前爲止，咱們尚未集成SpreadJS的插件和在線表格編輯器，所以該區域顯示爲一塊灰色的DIV）：

 

 

 

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

SpreadJS在線表格編輯器目錄結構：

 

 

 

Vue工程目錄結構：

 

 

 

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

 

這裏有個小問題：爲何要把SpreadJS在線表格編輯器的源碼複製到static目錄，而不是assets目錄？

其實經過Vue的官方說明，就能夠理解：首先，assets文件夾和static文件夾在vue-cli生成的項目中，都是用來存放靜態資源的。assets目錄中的文件會被webpack處理解析爲模塊依賴，並只支持相對路徑形式。

 

而static 目錄下的文件並不會被Webpack處理：它們會直接被複制到最終的打包目錄（默認是dist/static）下。必須使用絕對路徑引用這些文件，這是經過在 config.js 文件中的 build.assetsPublicPath 和 build.assetsSubDirectory 鏈接來肯定的。Webpack默認將static目錄的文件原本來本地輸出，因此當頁面要使用絕對路徑時，資源文件就須要放在static目錄下。

 

由於Vue運行起來並非靜態的，咱們還須要將static目錄中的index.html文件內容，所有拷貝到Vue的入口文件【index.html】中。修改完全部的資源文件路徑後，打開項目展現頁面的控制檯，咱們會發現，此時已經將全部的SpreadJS以及在線表格編輯器資源引入成功了。

 

 

 

 

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

 

 

 

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

 

spreadjs.vue：

 

 

 

傳統的只集成 SpreadJS 插件的方式依然有效。

 

此時，打開項目展現頁面，發現SpreadJS插件彷佛沒有被正確加載？

 

下面，咱們將着手解決插件未正確加載的問題：從官方提供的index.html文件中，將全部承載SpreadJS表格主體部分的元素，所有拷貝到spreadjs.vue中，替換默認的container標籤。

 

打開前端展現頁面，就會發現本來灰色的部分，出現了一個加載動畫。

 

 

 

 

爲了讓Vue正確讀取到spreadWrapper.html和ribbon.html的內容，須要修改項目路徑，增長‘static/’根目錄。

asyncLoader.js

 

 

 

 

完成上述步驟後，頁面部分會正常顯示SpreadJS的表格以及底部狀態欄。

 

 

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

fileMenu.js

 

 

 

 

注意，SpreadJS的菜單工具欄是經過絕對定位顯示在頁面上方的，爲了讓菜單工具欄正確顯示，咱們還須要調整SpreadJS工具欄距頁面頂部的高度（默認爲top:195px）。

 

Local.cn.css：

 

 

 

 

刷新頁面，最終效果以下：

 

 

 

 

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

修復再次進入頁面插件時未加載的問題

完成了SpreadJS與Vue的集成後，當咱們點擊瀏覽器「返回」按鈕，再次進入表格編輯器頁面時，會發現樣式所有錯亂：

 

 

 

形成上述問題的緣由： index.js 中的 js 代碼，並不會隨着路由的切換而從新執行。

 

爲了修復此問題，咱們能夠：

1. 將插件的源碼加載方式改成 ES6
2. 在 Vue 對應的頁面組件 mount 中從新調用初始化方法

 

 

 

 

蘇寧使用SpreadJS 與在線表格編輯器的應用實踐

 

 

 

這是咱們使用SpreadJS純前端表格控件開發的「人才臺帳」項目應用截圖，SpreadJS已經幫咱們實現了微軟Office Excel 90%以上的功能，咱們只需增長一些UI樣式和下拉框，就能夠迅速交付一套完整的基於Web的 Excel功能模塊，對於提高項目研發效率、較低後期維護成原本說，SpreadJS都可提供巨大幫助。

 

OK，今天的分享就到這裏，你們能夠自行前往SpreadJS官網下載體驗，同時也能夠在這裏觀看本次課程回放。