本文通過蘇寧使用SpreadJS開發極客系統的案例講解如何在Vue腳手架工程中，整合SpreadJS純前端表格控件與在線表格編輯器源碼，實現Web版全功能Excel的具體實踐。

點擊下載SpreadJS試用版

企業介紹

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

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

蘇寧易購“極客辦公平臺”簡介

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

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

為保證新老系統順利過渡，需要完成大量的Excel數據遷移工作，因此，新老系統對Excel文件的兼容性至關重要。借助SpreadJS 純前端無損導入導出Excel這一產品特性，極客辦公平臺得以順利完成交付并迅速投入使用。

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

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

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

開發環境介紹

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

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

在開發階段最好引用未壓縮的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均可提供巨大幫助。

想要獲得 SpreadJS 更多資源的伙伴，請點這里。

想要獲取 SpreadJS 正版授權的伙伴，