SpreadJS + GcExcel 一出,誰與爭鋒!全棧表格技術輕鬆應對複雜公式計算場景(一)
設計思路篇
Excel是我們日常辦公中最常用的電子表格程式,不僅可滿足報表資料的計算需求,還可提供繪圖、資料透視分析、BI和Visual Basic for Applications (VBA)巨集語言程式設計等多項功能。經過數年發展,Excel已具備所有電子表格的基本能力,在滿足統計、工程和財務領域的各項資料分析需求的同時,還取代了Lotus 1-2-3成為電子表格的行業標準。
Excel的命名源自於英語中"Excellence"一詞,代表著:卓越和優秀,而最能體現其"卓越和優秀"的點就是Excel的公式與函式。Excel 的公式函式使得本身靜態的表格真正"活"了起來。
如果說Excel是基於"公式與函式"的特性,成為了職場精英高效工作必備的神兵,那麼純前端表格控制元件 SpreadJS 也正是依靠這一特性,成為了開發者快速開發企業Web應用的利器。
SpreadJS是葡萄城研發的一款基於 HTML5 的純前端表格控制元件,相容 450 多種 Excel 公式,具備"高效能、跨平臺、與 Excel 高度相容"的產品特性,備受華為、明源雲、遠光軟體等知名企業青睞,被中國軟體行業協會認定為"中國優秀軟體產品"。藉助SpreadJS的元件功能,開發者得以將Excel搬到了線上的網頁中,使應用程式具備線上Excel 的能力。
影片: http://videos.grapecity.com.cn/SpreadJS/online/SpreadJS_Introduction.mp4
在2021年之前,基於瀏覽器的Web 應用的確可以滿足企業大部分需求,但隨著 Web 3.0的推出,以及萬物互聯與元宇宙等新興概念的出現,應用程式極致的效能與使用者體驗開始逐步替代程式功能本身,並有望成為未來Web系統的"標配"。
不過,受限於瀏覽器記憶體本身,前端元件的效能瓶頸無法避免。為此,葡萄城提出了"類 Excel 全棧解決方案"來解決這一問題。
SpreadJS + GcExcel構建類Excel全棧解決方案
由於前端資源的限制,當我們去載入一個包含大量計算公式的Excel時(例如地產行業的投資管理模型、金融保險行業的金融精算表格、生產製造業的設計底稿等),表格載入緩慢、程式未響應,甚至崩潰的問題時有發生。
這些Excel的共同特點是:公式數量在10W~20W以上,表格包含大量邏輯複雜且互相巢狀的公式函式,如果僅依靠JS元件和瀏覽器處理這些文件,顯然會捉襟見肘。然而,如果將它們放在後端伺服器上執行,即不會影響到使用者體驗,又能明顯優化前端效能,實現前後端負載均衡,這便是SpreadJS + GcExcel 構建類 Excel 全棧解決方案的設計初衷。
利用 GcExcel在服務端的效能優勢,將其與純前端表格控制元件SpreadJS雙劍合璧,即可滿足線上文件資料同步、線上填報、批量匯出與列印,以及類 Excel 報表模板設計與服務端高效能處理等功能。
類 Excel 全棧解決方案在處理大型 Excel 文件時的優化思路:
1、利用GcExcel在服務端批量處理 Excel 的特性和效能優勢,在Java或 .NET平臺對整個Excel文件進行載入和總體計算。
2、僅利用純前端表格控制元件SpreadJS來展示頁面結果,並實現與使用者進行互動。
方案架構圖如下所示:
根據這樣的設計,GcExcel可以有效分擔原本SpreadJS的部分任務(這部分任務本身會大量消耗前端效能),減輕前端壓力,全棧結構也有效避免了頭重腳輕,使應用程式更加優雅。
本期主要介紹了全棧表格技術在應對複雜公式計算場景時的設計思路,下一期我們將從程式碼開始詳細講解。如果您的專案中有類似的需求,或者希望進一步瞭解類 Excel 全棧解決方案的應用場景和案例,歡迎前往 葡萄城官網 。
- React Suspense 嚐鮮,處理前後端IO非同步操作
- JSON資料傳輸大法第一式——用OADate處理日期格式
- 資料傳輸POST心法分享,做前端的你還解決不了這個bug?
- 詳解BI系統中的任務排程
- 還在寫SQL做SAP二開?通過RFC呼叫NetWeaver,讓HANA資料庫操作更可靠
- 當.Net撞上BI視覺化,這3種“套路”你必須知道
- SpreadJS GcExcel 一出,誰與爭鋒!全棧表格技術輕鬆應對複雜公式計算場景(一)
- “四大高手”為你的 Vue 應用程式保駕護航
- 前端生成PDF,讓後端刮目相看
- 2021年度總結 | 葡萄城軟體開發技術回顧(下)
- 使用VUE元件建立SpreadJS自定義單元格(一)
- 前端er必須掌握的資料視覺化技術
- Svelte入門——Web Components實現跨框架元件複用(二)
- Svelte入門——Web Components實現跨框架元件複用
- 新技能GET!在前端表格中花式使用非同步函式的奧義
- 左手IRR,右手NPV,掌握髮家致富道路密碼
- 別了“CRUD”,談低程式碼對程式設計師的影響
- 揭祕你處理資料的“底層邏輯”,詳解公式引擎計算(一)
- 前端“油畫設計師”——雙快取繪製與油畫分層機制
- Docker與k8s的恩怨情仇(八)——驀然回首總覽Kubernetes