近年來，隨著互聯(lián)網(wǎng)產(chǎn)業(yè)的飛速發(fā)展，企業(yè)業(yè)務層面的大數(shù)據(jù)分析系統(tǒng)、數(shù)字營銷、商業(yè)智能等新興領域的需求呈爆發(fā)式增長。在最優(yōu)化內(nèi)存消耗的前提下，通過 Web 端直接實現(xiàn)復雜計算，支配并處理海量數(shù)據(jù)的用戶場景已經(jīng)屢見不鮮。如何才能高效優(yōu)雅地完成復雜場景的數(shù)據(jù)處理，已經(jīng)不單單是對前端開發(fā)者算法功力的考驗，學會評估并使用合適的前端框架和前端開發(fā)工具已成為當今企業(yè)高級開發(fā)工程師必不可少的技能。

 

葡萄城，作為深耕前端、.NET控件及組件技術 30 年的一流軟件產(chǎn)品和服務提供商，希望通過本文，向您展示葡萄城創(chuàng)新性的前端開發(fā)工具和深厚的技術積淀。無論你是個人開發(fā)者，希望從這些技術中汲取靈感，改進工作效率；還是企業(yè)的技術決策者，需要針對公司項目做技術選型，通過預測未來技術發(fā)展趨勢，得到項目的最優(yōu)投入產(chǎn)出比，本文都可作為一份很好的參考。

 

文章由以下兩個部分構成：

 

第一部分：純前端表格控件 SpreadJS 核心功能及適用場景

第二部分：純前端表格控件 SpreadJS 典型案例介紹

第一部分 純前端表格控件 SpreadJS 核心功能及適用場景

 

SpreadJS 是一款基于 HTML5 的純 JavaScript 電子表格和網(wǎng)格功能控件，以“高速低耗、純前端、零依賴”為產(chǎn)品特色，可嵌入任何操作系統(tǒng)，同時滿足 .NET、Java、響應式 Web 應用及移動跨平臺的表格數(shù)據(jù)處理和類 Excel 的表格應用開發(fā)，為用戶提供更快捷、更安全、更熟悉的表格數(shù)據(jù)處理方式和更友好的類 Excel 操作體驗。

 

圖片包含 文字 描述已自動生成

 

SpreadJS 與主流前端開發(fā)工具類似，具備以下特點：

 

•基于HTML5規(guī)范，無需引用 JQuery 的外部庫和框架

•提供輕量的前端組件、具備數(shù)量眾多統(tǒng)一且易讀的 API

•提供符合UMD規(guī)范的模塊化設計理念，易于擴展并支持在 VSCode 中使用

•全面支持 Angular、React、Vue、Knockout 和 Ionic框架

 

SpreadJS 核心功能

 

 

1、 實現(xiàn)無代碼開發(fā)的類 Excel 的表格應用程序

 

 

SpreadJS 內(nèi)置桌面端和 Web 端的在線表格編輯器，支持用戶填報模塊，可即時創(chuàng)建類似 Excel 的電子表格應用。通過 SpreadJS 提供的類似 Excel模板設計器，用戶還可輕松設計模板，節(jié)約應用程序開發(fā)所需的時間和精力。無代碼開發(fā)式平臺，各行業(yè)人員均可通過 Excel 軟件制作表格，然后輕松導入 SpreadJS 中，提升模板復用性。

 

2、 具備極高的渲染性能和計算能力

 

 

相比其他電子表格，SpreadJS 提供更全面的內(nèi)置公式和自定義函數(shù)，可針對大數(shù)據(jù)和復雜計算進行優(yōu)化，即可為復雜的公式增加計算能力，又不會過多地占用系統(tǒng)資源。

 

3、 純 JavaScript 架構，支持 TypeScript、Angular、React 和 Vue

 

 

SpreadJS 基于 HTML5 規(guī)范，無需引用 JQuery庫和其他框架，即可在 Web 應用程序中實現(xiàn) Excel 全部功能。SpreadJS無平臺限制，.NET 和 Java 框架均可使用；也無服務器要求，Windows 和Linux 服務器同樣可以使用。

 

4、 模塊化設計，符合UMD規(guī)范

 

UMD規(guī)范（即通用模塊規(guī)范）是為了解決：當多個第三方Javascript腳本在一起混合使用時，可通過統(tǒng)一的模式來構造JavaScript代碼。

 

SpreadJS 完全基于模塊化設計，符合 UMD規(guī)范，用戶只需將所使用的功能模塊引入項目中（按需加載）即可正常使用。

 

5、 內(nèi)置形狀（Shape）以及自定義形狀支持

 

 

SpreadJS 內(nèi)置了諸多類 Excel 的形狀設置，如線條、矩形、箭頭、流程圖等，可為您的前端界面添加更多細節(jié)展現(xiàn)和可視化效果，且這些內(nèi)置的形狀都支持無縫導入和導出。

 

SpreadJS 適用場景

 

SpreadJS可滿足所有前端表格數(shù)據(jù)處理需要以及類 Excel應用程序的開發(fā)，產(chǎn)品自面世以來，已經(jīng)在能源、金融、物流、大數(shù)據(jù)、信息技術等行業(yè)引起廣泛關注，備受華為、泛微、滴滴、海信、立信、中國平安、中國能建、中通快遞、金麒麟和北京神軟等客戶青睞。

 

 

SpreadJS 具體適用場景包含以下五個方面：

 

1、EXCEL 應用場景

 

最終用戶已熟練掌握 Excel 軟件的使用方式和習慣，并以 Excel 作為主要工作工具的場景，SpreadJS 能提供與 Excel 幾乎一致的交互體驗和數(shù)據(jù)處理功能；

 

最終用戶存在大量 Excel 文件，需要導入、編輯（保持原樣）的操作，通過 SpreadJS 可以在前端完成導入導出、并保持文件最大的兼容性；

 

最終用戶使用的系統(tǒng)，需要將 Excel 文件作為數(shù)據(jù)導出，比如OA、賬務、生產(chǎn)系統(tǒng)等，通過 SpreadJS 即可輕松的將數(shù)據(jù)導出為指定模板的 Excel 文件，進行復用。

 

2、Grid 表格數(shù)據(jù)處理場景

 

 

當用戶希望以表格的形式展示數(shù)據(jù)時，比如自動排序、篩選、行表頭、列表頭、匯總、邊框和單元格樣式；或者，需要給最終用戶提供基本數(shù)據(jù)展示，如分組、查找、聚合、公式等操作時，SpreadJS均可滿足。

 

3、Form表單填報場景

 

用戶希望以表單的形式進行數(shù)據(jù)填報，如申請表；Word 文檔類報告的生成、打印和導出，如檢測報告時，通過SpreadJS內(nèi)置的多種單元格類型，如按鈕、單復選、下拉列表、單元格內(nèi)的公式引用、數(shù)據(jù)驗證等均可滿足。

 

4、數(shù)據(jù)可視化場景

 

SpreadJS可用于將數(shù)據(jù)以圖表、迷你圖(Sparkline)、形狀(Shape)、條件格式等圖形化顯示，滿足交互式分析、Dashboard、OLAP、BI等數(shù)據(jù)可視化場景。

 

5、在線文檔需求場景

 

SpreadJS 已將類 Excel 的界面嵌入 Web 應用中，使最終用戶有能力直接通過瀏覽器完成各種文檔操作，點擊此處，免費體驗SpreadJS在線表格編輯器。

 

第二部分 純前端表格控件 SpreadJS 典型案例介紹

 

華為 - 勘探設計部“eSurvey”

 

案例特點：在采購SpreadJS 之前，重度依賴 Excel 作為前期調(diào)研、資料收集、數(shù)據(jù)交互、方案設計 + 審核的工具，積攢了大量的 Excel 文件需要進行導入導出并現(xiàn)場打印，使用SpreadJS后，上述問題均得到了解決。

 

 

江蘇稅軟 - 稅軟臺賬系統(tǒng)

 

案例特點：由于稽查各部門、各環(huán)節(jié)缺少對查辦案件過程、結果、效率進行詳細記錄，也沒有一個數(shù)據(jù)共享、交互、匯總平臺，導致在績效考核中，定性類指標的考核通常爭議比較大。為進一步提高稅務稽查執(zhí)法質(zhì)效，規(guī)范稅務稽查執(zhí)法行為，加強稽查績效考核，強化稽查內(nèi)控機制，防范執(zhí)法風險，因此開發(fā)了稅軟臺賬系統(tǒng)。該系統(tǒng)需要借助 SpreadJS 的無編碼模板設計器，實現(xiàn)Excel所有功能，而且流暢度要和本地的Excel幾乎相同。

 

 

華閩通達 - R 平臺應用

 

案例特點：R 平臺采用了面向業(yè)務人員的開發(fā)模式，結合現(xiàn)代工業(yè)“流水線裝配”的生產(chǎn)理念，提供大量構件，助力客戶項目快速搭建。SpreadJS 表格控件主要用于 R 平臺 Excel 表格和基于單元格報表的定制，即支持瀏覽器展現(xiàn) Excel 格式、支持客戶端打印、支持在線報表模板編輯、在線填報以及和 Excel 一致的 UI。

 

 

北京三維天地 - 實驗室管理系統(tǒng)

 

案例特點：客戶經(jīng)過多方評估，最終選擇 SpreadJS 進行應用系統(tǒng)開發(fā)，完成了系統(tǒng)數(shù)據(jù)展示，實現(xiàn)了數(shù)據(jù)綁定、采集、反存等功能，解決了以下兩個長期困擾客戶的問題：

 

原系統(tǒng)為 B/S 架構，沒有專門用于數(shù)據(jù)展示的部分，現(xiàn)在需要增加展示數(shù)據(jù)的模塊

 

原系統(tǒng)無法實現(xiàn)數(shù)據(jù)綁定、展示、采集、反存等功能，此外還需要支持自定義公式以及前端 PDF 導出

 

使用SpreadJS后，上述問題均得到了解決。

 

 

中國能建 – 企業(yè)數(shù)據(jù)填報

 

案例特點：“企業(yè)數(shù)據(jù)填報系統(tǒng)”是中國能建安徽電建二公司內(nèi)部人員數(shù)據(jù)填報的軟件項目，應用于各種公司各機構數(shù)據(jù)填報審批，并上報公司總部進行匯總分析。選擇 SpreadJS 主要考慮以下兩方面原因：

 

高性能：SpreadJS 是一個基于 HTML5 技術的純 JavaScript 控件。不但提供了更高的渲染性能和更流暢的界面操作，此外，SpreadJS 通過一個高效的數(shù)據(jù)模型來快速操作數(shù)據(jù)，使得載入和操作超百萬行數(shù)據(jù)變得更為方便且快捷。

 

無編碼模板設計器：SpreadJS 提供在線表單設計器，其擴展性高，無需編碼，不需要專業(yè)培訓，即可快速上手。之前我們通過 Excel 軟件設計的表格文檔，借助模板設計器，輕松導入 SpreadJS 中，提高了模板的復用性。

 

 

德茂科技 – 財政預算經(jīng)費審批與填報系統(tǒng)

 

案例特點：財政預算經(jīng)費審批與填報系統(tǒng)是茂名市財政業(yè)務信息化的一個重要組成部分，目的是打造一個高效的日常財政業(yè)務辦公流程。將財政預算的相關工作在信息化的系統(tǒng)中進行。用戶需要一個高度兼容Excel的純前端控件，不僅樣式、公式兼容Excel，操作習慣也和Excel保持一致，在系統(tǒng)使用中完全可以拋棄掉原 Excel 程序，使所有工作在系統(tǒng)中完成。

 

 

銀彈谷 – V3企業(yè)架構平臺

 

案例特點：V3企業(yè)架構平臺（簡稱：V平臺）是運用先進的管理思想和設計方法構建的零編碼、支持配置化生產(chǎn)的新一代軟件開發(fā)平臺。之所以選擇 SpreadJS 是因為：

 

可以拋棄原插件版報表需要安裝插件的困擾，純H5頁面方式，沒有瀏覽器限制。

繼續(xù)沿用原插件版的excel模式的設計器，符合報表設計者的開發(fā)習慣，不增加額外學習成本。

原來配置開發(fā)的報表基本無需修改，平滑兼容、無縫對接。

通過 SpreadJS 擴展出了更多功能，如報表連打、遠程云打印、支持報表數(shù)據(jù)鉆取等。

 

 

最后

 

希望通過本文介紹，使您對 SpreadJS有了更深入的了解。同時，也希望文章中提到的產(chǎn)品核心功能和典型案例，為您在開發(fā)類Excel 表格應用與跨平臺表格數(shù)據(jù)交互時，提供更全面的解決方案，助您更高效地處理 Web 端海量表格數(shù)據(jù)。