近年來,隨著網際網路產業的飛速發展,企業業務層面的大資料分析系統、數字營銷、商業智慧等新興領域的需求呈爆發式增長。在最優化記憶體消耗的前提下,通過 Web 端直接實現複雜計算,支配並處理海量資料的使用者場景已經屢見不鮮。如何才能高效優雅地完成複雜場景的資料處理,已經不單單是對前端開發者演算法功力的考驗,學會評估並使用合適的前端框架和前端開發工具已成為當今企業高階開發工程師必不可少的技能。
葡萄城,作為深耕前端、.NET控制元件及元件技術 30 年的一流軟體產品和服務提供商,希望通過本文,向您展示葡萄城創新性的前端開發工具和深厚的技術積澱。無論你是個人開發者,希望從這些技術中汲取靈感,改進工作效率;還是企業的技術決策者,需要針對公司專案做技術選型,通過預測未來技術發展趨勢,得到專案的最優投入產出比,本文都可作為一份很好的參考。
文章由以下兩個部分構成:
- 第一部分:純前端表格控制元件 SpreadJS 核心功能及適用場景
- 第二部分:純前端表格控制元件 SpreadJS 典型案例介紹
第一部分 純前端表格控制元件 SpreadJS 核心功能及適用場景
SpreadJS 是一款基於 HTML5 的純 JavaScript 電子表格和網格功能控制元件,以“高速低耗、純前端、零依賴”為產品特色,可嵌入任何作業系統,同時滿足 .NET、Java、響應式 Web 應用及移動跨平臺的表格資料處理和類 Excel 的表格應用開發,為使用者提供更快捷、更安全、更熟悉的表格資料處理方式和更友好的類 Excel 操作體驗。
SpreadJS 與主流前端開發工具類似,具備以下特點:
- 基於HTML5規範,無需引用 JQuery 的外部庫和框架
- 提供輕量的前端元件、具備數量眾多統一且易讀的 API
- 提供符合UMD規範的模組化設計理念,易於擴充套件並支援在 VSCode 中使用
- 全面支援 Angular、React、Vue、Knockout 和 Ionic框架
SpreadJS 核心功能
1、 實現無程式碼開發的類 Excel 的表格應用程式
SpreadJS 內建桌面端和 Web 端的線上表格編輯器,支援使用者填報模組,可即時建立類似 Excel 的電子表格應用。通過 SpreadJS 提供的類似 Excel模板設計器,使用者還可輕鬆設計模板,節約應用程式開發所需的時間和精力。無程式碼開發式平臺,各行業人員均可通過 Excel 軟體製作表格,然後輕鬆匯入 SpreadJS 中,提升模板複用性。
2、 具備極高的渲染效能和計算能力
相比其他電子表格,SpreadJS 提供更全面的內建公式和自定義函式,可針對大資料和複雜計算進行優化,即可為複雜的公式增加計算能力,又不會過多地佔用系統資源。
3、 純 JavaScript 架構,支援 TypeScript、Angular、React 和 Vue
SpreadJS 基於 HTML5 規範,無需引用 JQuery庫和其他框架,即可在 Web 應用程式中實現 Excel 全部功能。SpreadJS無平臺限制,.NET 和 Java 框架均可使用;也無伺服器要求,Windows 和Linux 伺服器同樣可以使用。
4、 模組化設計,符合UMD規範
UMD規範(即通用模組規範)是為了解決:當多個第三方Javascript指令碼在一起混合使用時,可通過統一的模式來構造JavaScript程式碼。
SpreadJS 完全基於模組化設計,符合 UMD規範,使用者只需將所使用的功能模組引入專案中(按需載入)即可正常使用。
5、 內建形狀(Shape)以及自定義形狀支援
SpreadJS 內建了諸多類 Excel 的形狀設定,如線條、矩形、箭頭、流程圖等,可為您的前端介面新增更多細節展現和視覺化效果,且這些內建的形狀都支援無縫匯入和匯出。
SpreadJS 適用場景
SpreadJS可滿足所有前端表格資料處理需要以及類 Excel應用程式的開發,產品自面世以來,已經在能源、金融、物流、大資料、資訊科技等行業引起廣泛關注,備受華為、泛微、滴滴、海信、立信、中國平安、中國能建、中通快遞、金麒麟和北京神軟等客戶青睞。
SpreadJS 具體適用場景包含以下五個方面:
EXCEL 應用場景
終端使用者已熟練掌握 Excel 軟體的使用方式和習慣,並以 Excel 作為主要工作工具的場景,SpreadJS 能提供與 Excel 幾乎一致的互動體驗和資料處理功能;
終端使用者存在大量 Excel 檔案,需要匯入、編輯(保持原樣)的操作,通過 SpreadJS 可以在前端完成匯入匯出、並保持檔案最大的相容性;
終端使用者使用的系統,需要將 Excel 檔案作為資料匯出,比如OA、賬務、生產系統等,通過 SpreadJS 即可輕鬆的將資料匯出為指定模板的 Excel 檔案,進行復用。
Grid 表格資料處理場景
當使用者希望以表格的形式展示資料時,比如自動排序、篩選、行表頭、列表頭、彙總、邊框和單元格樣式;或者,需要給終端使用者提供基本資料展示,如分組、查詢、聚合、公式等操作時,SpreadJS均可滿足。
Form表單填報場景
使用者希望以表單的形式進行資料填報,如申請表;Word 文件類報告的生成、列印和匯出,如檢測報告時,通過SpreadJS內建的多種單元格型別,如按鈕、單複選、下拉選單、單元格內的公式引用、資料驗證等均可滿足。
資料視覺化場景
SpreadJS可用於將資料以圖表、迷你圖(Sparkline)、形狀(Shape)、條件格式等圖形化顯示,滿足互動式分析、Dashboard、OLAP、BI等資料視覺化場景。
線上文件需求場景
SpreadJS 已將類 Excel 的介面嵌入 Web 應用中,使終端使用者有能力直接通過瀏覽器完成各種文件操作,點選此處,免費體驗SpreadJS線上表格編輯器。
第二部分 純前端表格控制元件 SpreadJS 典型案例介紹
華為 - 勘探設計部“eSurvey”
案例特點:在採購SpreadJS 之前,重度依賴 Excel 作為前期調研、資料收集、資料互動、方案設計 + 稽核的工具,積攢了大量的 Excel 檔案需要進行匯入匯出並現場列印,使用SpreadJS後,上述問題均得到了解決。
江蘇稅軟 - 稅軟臺賬系統
案例特點:由於稽查各部門、各環節缺少對查辦案件過程、結果、效率進行詳細記錄,也沒有一個資料共享、互動、彙總平臺,導致在績效考核中,定性類指標的考核通常爭議比較大。為進一步提高稅務稽查執法質效,規範稅務稽查執法行為,加強稽查績效考核,強化稽查內控機制,防範執法風險,因此開發了稅軟臺賬系統。該系統需要藉助 SpreadJS 的無編碼模板設計器,實現Excel所有功能,而且流暢度要和本地的Excel幾乎相同。>>案例詳情
華閩通達 - R 平臺應用
案例特點:R 平臺採用了面向業務人員的開發模式,結合現代工業“流水線裝配”的生產理念,提供大量構件,助力客戶專案快速搭建。SpreadJS 表格控制元件主要用於 R 平臺 Excel 表格和基於單元格報表的定製,即支援瀏覽器展現 Excel 格式、支援客戶端列印、支援線上報表模板編輯、線上填報以及和 Excel 一致的 UI。>>案例詳情
北京三維天地 - 實驗室管理系統
案例特點:客戶經過多方評估,最終選擇 SpreadJS 進行應用系統開發,完成了系統資料展示,實現了資料繫結、採集、反存等功能,解決了以下兩個長期困擾客戶的問題:
原系統為 B/S 架構,沒有專門用於資料展示的部分,現在需要增加展示資料的模組
原系統無法實現資料繫結、展示、採集、反存等功能,此外還需要支援自定義公式以及前端 PDF 匯出
使用SpreadJS後,上述問題均得到了解決。>>案例詳情
中國能建 – 企業資料填報
案例特點:“企業資料填報系統”是中國能建安徽電建二公司內部人員資料填報的軟體專案,應用於各種公司各機構資料填報審批,並上報公司總部進行彙總分析。選擇 SpreadJS 主要考慮以下兩方面原因:
高效能:SpreadJS 是一個基於 HTML5 技術的純 JavaScript 控制元件。不但提供了更高的渲染效能和更流暢的介面操作,此外,SpreadJS 通過一個高效的資料模型來快速運算元據,使得載入和操作超百萬行資料變得更為方便且快捷。
無編碼模板設計器:SpreadJS 提供線上表單設計器,其擴充套件性高,無需編碼,不需要專業培訓,即可快速上手。之前我們通過 Excel 軟體設計的表格文件,藉助模板設計器,輕鬆匯入 SpreadJS 中,提高了模板的複用性。>>案例詳情
德茂科技 – 財政預算經費審批與填報系統
案例特點:財政預算經費審批與填報系統是茂名市財政業務資訊化的一個重要組成部分,目的是打造一個高效的日常財政業務辦公流程。將財政預算的相關工作在資訊化的系統中進行。使用者需要一個高度相容Excel的純前端控制元件,不僅樣式、公式相容Excel,操作習慣也和Excel保持一致,在系統使用中完全可以拋棄掉原 Excel 程式,使所有工作在系統中完成。>>案例詳情
銀彈谷 – V3企業架構平臺
案例特點:V3企業架構平臺(簡稱:V平臺)是運用先進的管理思想和設計方法構建的零編碼、支援配置化生產的新一代軟體開發平臺。之所以選擇 SpreadJS 是因為:
- 可以拋棄原外掛版報表需要安裝外掛的困擾,純H5頁面方式,沒有瀏覽器限制。
- 繼續沿用原外掛版的excel模式的設計器,符合報表設計者的開發習慣,不增加額外學習成本。
- 原來配置開發的報表基本無需修改,平滑相容、無縫對接。
- 通過 SpreadJS 擴充套件出了更多功能,如報表連打、遠端雲列印、支援報表資料鑽取等。>>案例詳情
最後
希望通過本文介紹,使您對 SpreadJS有了更深入的瞭解。同時,也希望文章中提到的產品核心功能和典型案例,為您在開發類Excel 表格應用與跨平臺表格資料互動時,提供更全面的解決方案,助您更高效地處理 Web 端海量表格資料。
若需獲取更多SpreadJS 應用案例,請訪問SpreadJS官網。