表格，又稱爲表，既是一種可視化交流的模式，又是一種組織整理數據的手段。通過將“表格”嵌入企業信息化系統，可幫助業務人員更快、更準確地處理數據，大幅提高運營管理效率。
企業信息化系統大致可以分爲以下三類：
- 在線文檔系統：基於表格實現多人協同編輯，各部門實時完成對同一張數據表的錄入
- 數據填報系統：基於表格簡化數據綁定和校驗過程，可快速準確的處理打印報送、實時預覽、多級上報等需求
- 表單和報表系統：可直接與Excel 文件交互，複用企業 Excel 資產，實現線下線上的數據平滑遷移
通過將“表格”模塊嵌入上述信息化系統，可滿足對 Excel文檔的操作和系統兼容性要求，實現高併發的數據處理和填報，以及靈活多變的報表格式設計。葡萄城的 SpreadJS 純前端表格控件，便可有效應對這些需求。
SpreadJS 是一款基於 HTML5 的純前端表格控件，兼容 450 種以上的 Excel 公式，具備“高性能、跨平臺、與 Excel 高度兼容”的產品特性，備受華爲、明源雲、遠光軟件等知名企業青睞，被中國軟件行業協會認定爲“中國優秀軟件產品”。
爲什麼要使用在線表格編輯器？
1、 更細膩的功能顆粒度
做過sdk的都知道顆粒度的問題，使用SpreadJS 表格編輯器，可以享受兩種顆粒度的api：編輯器提供的應用層面的api和SpreadJS提供的實現層面的api。當需要二次開發的時候，這兩種api交替使用可以大大簡化開發的過程。
2、 有效降低開發成本
SpreadJS 的在線表格編輯器直接提供了實現Excel功能的源碼、可視化操作界面和API接口，可幫助開發人員減輕代碼量，降低開發成本。
3、 最好的技術用例
SpreadJS官網的API文檔更傾向於講解SpreadJS的函數使用，而表格編輯器源碼則提供了從上往下分解的代碼用例，其完全按照Excel功能進行分類，對於實現類Excel電子表格的系統開發來說，這是最好的用例了。
4、 最佳的價值輸出
對於開發者來說，直接拿到SpreadJS的源碼往往不知道能做到什麼樣子，但是拿到了在線表格編輯器的源碼，用戶就可以了一目瞭然地看到SpreadJS強大的類 Excel 數據處理和計算能力，從而更加認可SpreadJS的價值。
SpreadJS 在線表格編輯器的主要功能
- 模板設計：沿用 Excel 的使用習慣，用戶無需學習即可輕鬆設計表單模板。
- 數據綁定：提供單元格級別的數據綁定，可針對某一單元格或在非綁定模式下操作數據。
- 在線填報：可在線完成對錶單數據的填報、收集、彙總、計算和呈現。
- 表格功能：提供數據排序、過濾、分組、切片器等常規功能。
- 數據驗證：內置基本數據校驗與自定義校驗兩種方式。
- 凍結行列：提供凍結行頭、列頭、行尾、列尾，輕鬆實現統計行等功能。
- 公式支持：內置 450 多種公式函數，並支持異步函數和自定義公式。
- 導入導出：支持在線導入、導出 Excel（xlsx）文件，以及導出 PDF。
- 條件格式：支持 18 種條件格式，可簡單且快捷的建立多種條件驗證。
SpreadJS 在線表格編輯器的產品特性
- 靈活的應用方式
SpreadJS 在線表格編輯器採用了組件化的設計架構，以 Dom 作爲容器，其目標場景定位於可嵌入各類前端頁面，並通過擴展插件的形式與 SpreadJS 進行交互。
- 更易嵌入、移植
SpreadJS 在線表格編輯器不依賴於任何外部類庫，有自己的命名空間，以閉包方式，避免 CSS 樣式衝突，並可直接在 Angular、Vue、React 等前端 JS 框架中調用。
- 體積更小，秒級加載
SpreadJS 在線表格編輯器的體積很小，不到 4 MB，且加載速度很快，首次加載僅需 1 ~ 2 秒（以上數據均爲測試數據，僅供參考）。
- 定製更容易，交互更豐富
SpreadJS 在線表格編輯器採用了聲明式語法，代替了 HTML 源代碼，二次封裝更容易，定製方式更靈活。
SpreadJS 在線表格編輯器的改造項目
- 頂部工具欄樣式和事件綁定
如下圖所示, 在編輯器 index/index.html 這個文件的container裏面添加自定義的樣式：
並對添加的按鈕進行事件的綁定, 這個綁定是在initSpread.js的initEvent方法中進行的，編輯器初始化後會調用此方法。
- 工具欄面板
如果要新增功能圖標，則需要在ribbon/ribbon.html裏面添加一欄，並定義相應的點擊事件。
- 命令改造：anyscLicenser 事件
調用SpreadJS的功能有兩種方法，一種是通過SpreadJS提供的方法，還有一種則是通過命令，表格編輯器對於SpreadJS功能的調用，大部分採取了命令的方式，如果你想對現有的編輯器功能進行改造，那麼你需要改造對SpreadJS方法的調用，也需要改造對命令的使用。
改造對SpreadJS方法的調用是沒什麼問題的，只需要根據官方的文檔和用例按需改就行了，但是改造對命令的使用則需要通過監聽事件來實現。如下圖，我們需要在SpreadJS的命令管理器中，把anyscLicenser 事件和自定義的處理方法進行關聯，使得SpreadJS一旦監聽到anyscLicenser 事件，就自動執行對應處理方法。在處理方法中，我們可以去增加另外的處理，從而實現對命令的改造。
這個事件監聽可以添加到自定義的文件裏面，但是要保證表格編輯器完全加載好了。
- 定製打印功能：
根據工具欄改造的方法新增入口圖標，將打印頁面通過事件與圖標進行綁定，點擊彈出，設置頁面上的設置綁定js對象的屬性。當點擊打印時，圖上代碼通過js對象的屬性對SpreadJS的PrintInfo對象進行設置，然後調用SpreadJS的print方法進行實際打印。
打印頁面
- 打印區域
- 方向
- 縮放
- 打印質量
-
打印頁數
-
打印紙張大小 (暫時沒開放, 默認A4)
頁邊距
- 頁邊距
- 居中方式
工作表
- 打印
- 打印順序
- 增加閱讀模式：
前端：初始化的時候執行一下 rewriteBase()，綁定ActiveSheetChanged事件, 將實時的selections賦值給GlobalInfo.selections，並重新repaint。
後端：添加開關配置, 用於持久化閱讀模式的開關。
- 格式刷功能：
SpreadJS 的 Copyto是一個很方便的方法，可以在同一個工作表中複製一個範圍的樣式、值、公式、註釋等，要想使用這個功能，只需定義一個全局變量isFormatPainting=false，當點擊格式刷按鈕的時候isFormatPainting設置爲true，並監聽GC.Spread.Sheets.Events.SelectionChanged事件，在事件內部回調中判斷isFormatPainting的值爲true的時候就將當前選中的區域做一下格式刷邏輯即可。
- 高級搜索功能
使用葡萄城的另一款服務端表格組件GCExcel的後端搜索實現快速搜索功能，通過設計後端查找的頁面，在SpreadJS編輯器本身的查找的框上面添加：
SpreadJS的使用反饋
-
SpreadJS提供了ssjson和xlsx兩種保存格式，可以最大化滿足二次開發和Excel兼容的場景。
-
SpreadJS的表格編輯器默認提供了類似Excel的主題外觀，對於用戶來說最大的價值就是“看，SpreadJS基本和Excel沒什麼區別！”
-
希望SpreadJS的表格編輯器可以提供多語言的版本，讓二次開發的用戶可以集中在技術上而不是語言翻譯上。
以上就是個性化改造SpreadJS在線表格編輯器的主要內容，對於有高效的模板設計、在線編輯和數據綁定需求，以及想要開發類似 Excel 功能和使用體驗系統的同學可以前往 SpreadJS 在線表格編輯器官網，下載試用。
純前端表格控件SpreadJS，兼容 450 種以上的 Excel 公式，具備“高性能、跨平臺、與 Excel 高度兼容”的產品特性，備受華爲、蘇寧易購、天弘基金等行業龍頭企業的青睞，並被中國軟件行業協會認定爲“中國優秀軟件產品”。SpreadJS 可爲用戶提供類 Excel 的功能，滿足表格文檔協同編輯、 數據填報、 類 Excel 報表設計等業務場景需求，極大的降低企業研發成本和項目交付風險。
本文轉載自葡萄城官網