SpreadJS v14.0正式版下載

表格，又稱為表，既是一種可視化交流的模式，又是一種組織整理數據的手段。通過將“表格”嵌入企業信息化系統，可幫助業務人員更快、更準確地處理數據，大幅提高運營管理效率。

企業信息化系統大致可以分為以下三類：

• 在線文檔系統：基于表格實現多人協同編輯，各部門實時完成對同一張數據表的錄入
• 數據填報系統：基于表格簡化數據綁定和校驗過程，可快速準確的處理打印報送、實時預覽、多級上報等需求
• 表單和報表系統：可直接與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 在線表格編輯器的主要功能

1. 模板設計：沿用 Excel 的使用習慣，用戶無需學習即可輕松設計表單模板。
2. 數據綁定：提供單元格級別的數據綁定，可針對某一單元格或在非綁定模式下操作數據。
3. 在線填報：可在線完成對表單數據的填報、收集、匯總、計算和呈現。
4. 表格功能：提供數據排序、過濾、分組、切片器等常規功能。
5. 數據驗證：內置基本數據校驗與自定義校驗兩種方式。
6. 凍結行列：提供凍結行頭、列頭、行尾、列尾，輕松實現統計行等功能。
7. 公式支持：內置 450 多種公式函數，并支持異步函數和自定義公式。
8. 導入導出：支持在線導入、導出 Excel（xlsx）文件，以及導出 PDF。
9. 條件格式：支持 18 種條件格式，可簡單且快捷的建立多種條件驗證。

SpreadJS 在線表格編輯器的產品特性

1. 靈活的應用方式

SpreadJS 在線表格編輯器采用了組件化的設計架構，以 Dom 作為容器，其目標場景定位于可嵌入各類前端頁面，并通過擴展插件的形式與 SpreadJS 進行交互。

1. 更易嵌入、移植

SpreadJS 在線表格編輯器不依賴于任何外部類庫，有自己的命名空間，以閉包方式，避免 CSS 樣式沖突，并可直接在 Angular、Vue、React 等前端 JS 框架中調用。

1. 體積更小，秒級加載

SpreadJS 在線表格編輯器的體積很小，不到 4 MB，且加載速度很快，首次加載僅需 1 ~ 2 秒（以上數據均為測試數據，僅供參考）。

1. 定制更容易，交互更豐富

SpreadJS 在線表格編輯器采用了聲明式語法，代替了 HTML 源代碼，二次封裝更容易，定制方式更靈活。

SpreadJS 在線表格編輯器的改造項目

1. 頂部工具欄樣式和事件綁定

如下圖所示, 在編輯器 index/index.html 這個文件的container里面添加自定義的樣式：

并對添加的按鈕進行事件的綁定, 這個綁定是在initSpread.js的initEvent方法中進行的，編輯器初始化后會調用此方法。

1. 工具欄面板

如果要新增功能圖標，則需要在ribbon/ribbon.html里面添加一欄，并定義相應的點擊事件。

1. 命令改造：anyscLicenser 事件

調用SpreadJS的功能有兩種方法，一種是通過SpreadJS提供的方法，還有一種則是通過命令，表格編輯器對于SpreadJS功能的調用，大部分采取了命令的方式，如果你想對現有的編輯器功能進行改造，那么你需要改造對SpreadJS方法的調用，也需要改造對命令的使用。

改造對SpreadJS方法的調用是沒什么問題的，只需要根據官方的文檔和用例按需改就行了，但是改造對命令的使用則需要通過監聽事件來實現。如下圖，我們需要在SpreadJS的命令管理器中，把anyscLicenser 事件和自定義的處理方法進行關聯，使得SpreadJS一旦監聽到anyscLicenser 事件，就自動執行對應處理方法。在處理方法中，我們可以去增加另外的處理，從而實現對命令的改造。

這個事件監聽可以添加到自定義的文件里面，但是要保證表格編輯器完全加載好了。

1. 定制打印功能：

根據工具欄改造的方法新增入口圖標，將打印頁面通過事件與圖標進行綁定，點擊彈出，設置頁面上的設置綁定js對象的屬性。當點擊打印時，圖上代碼通過js對象的屬性對SpreadJS的PrintInfo對象進行設置，然后調用SpreadJS的print方法進行實際打印。

打印頁面

• 打印區域
• 方向
• 縮放
• 打印質量

• 打印頁數

• 打印紙張大小 (暫時沒開放, 默認A4)

頁邊距

• 頁邊距
• 居中方式

工作表

• 打印
• 打印順序

1. 增加閱讀模式：

前端：初始化的時候執行一下 rewriteBase()，綁定ActiveSheetChanged事件, 將實時的selections賦值給GlobalInfo.selections，并重新repaint。

后端：添加開關配置, 用于持久化閱讀模式的開關。

1. 格式刷功能：

SpreadJS 的 Copyto是一個很方便的方法，可以在同一個工作表中復制一個范圍的樣式、值、公式、注釋等，要想使用這個功能，只需定義一個全局變量isFormatPainting=false，當點擊格式刷按鈕的時候isFormatPainting設置為true，并監聽GC.Spread.Sheets.Events.SelectionChanged事件，在事件內部回調中判斷isFormatPainting的值為true的時候就將當前選中的區域做一下格式刷邏輯即可。

1. 高級搜索功能

使用葡萄城的另一款服務端表格組件GCExcel的后端搜索實現快速搜索功能，通過設計后端查找的頁面，在SpreadJS編輯器本身的查找的框上面添加：

SpreadJS的使用反饋

1. SpreadJS提供了ssjson和xlsx兩種保存格式，可以最大化滿足二次開發和Excel兼容的場景。

2. SpreadJS的表格編輯器默認提供了類似Excel的主題外觀，對于用戶來說最大的價值就是“看，SpreadJS基本和Excel沒什么區別！”

3. 希望SpreadJS的表格編輯器可以提供多語言的版本，讓二次開發的用戶可以集中在技術上而不是語言翻譯上。

以上就是個性化改造SpreadJS在線表格編輯器的主要內容，對于有高效的模板設計、在線編輯和數據綁定需求，以及想要開發類似 Excel 功能和使用體驗系統的同學可以前往 SpreadJS 在線表格編輯器官網，下載試用。

SpreadJS | 下載試用

純前端表格控件SpreadJS，兼容 450 種以上的 Excel 公式，具備“高性能、跨平臺、與 Excel 高度兼容”的產品特性，備受華為、蘇寧易購、天弘基金等行業龍頭企業的青睞，并被中國軟件行業協會認定為“中國優秀軟件產品”。SpreadJS 可為用戶提供類 Excel 的功能，滿足表格文檔協同編輯、 數據填報、 類 Excel 報表設計等業務場景需求，極大的降低企業研發成本和項目交付風險。

本文轉載自