近年來(lái)，隨著互聯(lián)網(wǎng)產(chǎn)業(yè)的飛速發(fā)展，企業(yè)業(yè)務(wù)層面的大數(shù)據(jù)分析系統(tǒng)、數(shù)字營(yíng)銷、商業(yè)智能等新興領(lǐng)域的需求呈爆發(fā)式增長(zhǎng)。在最優(yōu)化內(nèi)存消耗的前提下，通過(guò) Web 端直接實(shí)現(xiàn)復(fù)雜計(jì)算，支配并處理海量數(shù)據(jù)的用戶場(chǎng)景已經(jīng)屢見不鮮。如何才能高效優(yōu)雅地完成復(fù)雜場(chǎng)景的數(shù)據(jù)處理，已經(jīng)不單單是對(duì)前端開發(fā)者算法功力的考驗(yàn)，學(xué)會(huì)評(píng)估并使用合適的前端框架和前端開發(fā)工具已成為當(dāng)今企業(yè)高級(jí)開發(fā)工程師必不可少的技能。
葡萄城，作為深耕前端、.NET控件及組件技術(shù) 30 年的一流軟件產(chǎn)品和服務(wù)提供商，希望通過(guò)本文，向您展示葡萄城創(chuàng)新性的前端開發(fā)工具和深厚的技術(shù)積淀。無(wú)論你是個(gè)人開發(fā)者，希望從這些技術(shù)中汲取靈感，改進(jìn)工作效率;還是企業(yè)的技術(shù)決策者，需要針對(duì)公司項(xiàng)目做技術(shù)選型，通過(guò)預(yù)測(cè)未來(lái)技術(shù)發(fā)展趨勢(shì)，得到項(xiàng)目的最優(yōu)投入產(chǎn)出比，本文都可作為一份很好的參考。
文章由以下兩個(gè)部分構(gòu)成，希望能夠幫您答疑解惑：
第一部分：純前端表格控件 SpreadJS 核心功能及適用場(chǎng)景
第二部分：純前端表格控件 SpreadJS 典型案例介紹
第一部分 純前端表格控件 SpreadJS 核心功能及適用場(chǎng)景
SpreadJS 是一款基于 HTML5 的純 JavaScript 電子表格和網(wǎng)格功能控件，以“高速低耗、純前端、零依賴”為產(chǎn)品特色，可嵌入任何操作系統(tǒng)，同時(shí)滿足 .NET、Java、響應(yīng)式 Web 應(yīng)用及移動(dòng)跨平臺(tái)的表格數(shù)據(jù)處理和類 Excel 的表格應(yīng)用開發(fā)，為用戶提供更快捷、更安全、更熟悉的表格數(shù)據(jù)處理方式和更友好的類 Excel 操作體驗(yàn)。
SpreadJS 與主流前端開發(fā)工具類似，具備以下特點(diǎn)：
1. 基于HTML5規(guī)范，無(wú)需引用 JQuery 的外部庫(kù)和框架
2. 提供輕量的前端組件、具備數(shù)量眾多統(tǒng)一且易讀的 API
3. 提供符合UMD規(guī)范的模塊化設(shè)計(jì)理念，易于擴(kuò)展并支持在 VSCode 中使用
4. 全面支持 Angular、React、Vue、Knockout 和 Ionic框架
SpreadJS 核心功能
1.實(shí)現(xiàn)無(wú)代碼開發(fā)的類 Excel 的表格應(yīng)用程序
SpreadJS 內(nèi)置桌面端和 Web 端的在線表格編輯器，支持用戶填報(bào)模塊，可即時(shí)創(chuàng)建類似 Excel 的電子表格應(yīng)用。通過(guò) SpreadJS 提供的類似 Excel模板設(shè)計(jì)器，用戶還可輕松設(shè)計(jì)模板，節(jié)約應(yīng)用程序開發(fā)所需的時(shí)間和精力。無(wú)代碼開發(fā)式平臺(tái)，各行業(yè)人員均可通過(guò) Excel 軟件制作表格，然后輕松導(dǎo)入 SpreadJS 中，提升模板復(fù)用性。
2.具備極高的渲染性能和計(jì)算能力
#FormatImgID_3#
相比其他電子表格，SpreadJS 提供更全面的內(nèi)置公式和自定義函數(shù)，可針對(duì)大數(shù)據(jù)和復(fù)雜計(jì)算進(jìn)行優(yōu)化，即可為復(fù)雜的公式增加計(jì)算能力，又不會(huì)過(guò)多地占用系統(tǒng)資源。
3. 純 JavaScript 架構(gòu)，支持 TypeScript、Angular、React 和 Vue
SpreadJS 基于 HTML5 規(guī)范，無(wú)需引用 JQuery庫(kù)和其他框架，即可在 Web 應(yīng)用程序中實(shí)現(xiàn) Excel 全部功能。SpreadJS無(wú)平臺(tái)限制，.NET 和 Java 框架均可使用;也無(wú)服務(wù)器要求，Windows 和Linux 服務(wù)器同樣可以使用。
4.模塊化設(shè)計(jì)，符合UMD規(guī)范
UMD規(guī)范(即通用模塊規(guī)范)是為了解決：當(dāng)多個(gè)第三方Javascript腳本在一起混合使用時(shí)，可通過(guò)統(tǒng)一的模式來(lái)構(gòu)造JavaScript代碼。
SpreadJS 完全基于模塊化設(shè)計(jì)，符合 UMD規(guī)范，用戶只需將所使用的功能模塊引入項(xiàng)目中(按需加載)即可正常使用。
5. 內(nèi)置形狀（Shape）以及自定義形狀支持
SpreadJS 內(nèi)置了諸多類 Excel 的形狀設(shè)置，如線條、矩形、箭頭、流程圖等，可為您的前端界面添加更多細(xì)節(jié)展現(xiàn)和可視化效果，且這些內(nèi)置的形狀都支持無(wú)縫導(dǎo)入和導(dǎo)出。
SpreadJS 適用場(chǎng)景
SpreadJS可滿足所有前端表格數(shù)據(jù)處理需要以及類 Excel應(yīng)用程序的開發(fā)，產(chǎn)品自面世以來(lái)，已經(jīng)在能源、金融、物流、大數(shù)據(jù)、信息技術(shù)等行業(yè)引起廣泛關(guān)注，備受華為、泛微、滴滴、海信、立信、中國(guó)平安、中國(guó)能建、中通快遞、金麒麟和北京神軟等客戶青睞。
SpreadJS 具體適用場(chǎng)景包含以下五個(gè)方面：
1. EXCEL 應(yīng)用場(chǎng)景
l 最終用戶已熟練掌握 Excel 軟件的使用方式和習(xí)慣，并以 Excel 作為主要工作工具的場(chǎng)景，SpreadJS 能提供與 Excel 幾乎一致的交互體驗(yàn)和數(shù)據(jù)處理功能;
l 最終用戶存在大量 Excel 文件，需要導(dǎo)入、編輯(保持原樣)的操作，通過(guò) SpreadJS 可以在前端完成導(dǎo)入導(dǎo)出、并保持文件最大的兼容性;
l 最終用戶使用的系統(tǒng)，需要將 Excel 文件作為數(shù)據(jù)導(dǎo)出，比如OA、賬務(wù)、生產(chǎn)系統(tǒng)等，通過(guò) SpreadJS 即可輕松的將數(shù)據(jù)導(dǎo)出為指定模板的 Excel 文件，進(jìn)行復(fù)用。
2. Grid 表格數(shù)據(jù)處理場(chǎng)景
當(dāng)用戶希望以表格的形式展示數(shù)據(jù)時(shí)，比如自動(dòng)排序、篩選、行表頭、列表頭、匯總、邊框和單元格樣式;或者，需要給最終用戶提供基本數(shù)據(jù)展示，如分組、查找、聚合、公式等操作時(shí)，SpreadJS均可滿足。
3. Form 表單填報(bào)場(chǎng)景
用戶希望以表單的形式進(jìn)行數(shù)據(jù)填報(bào)，如申請(qǐng)表;Word 文檔類報(bào)告的生成、打印和導(dǎo)出，如檢測(cè)報(bào)告時(shí)，通過(guò)SpreadJS 內(nèi)置的多種單元格類型，如按鈕、單復(fù)選、下拉列表、單元格內(nèi)的公式引用、數(shù)據(jù)驗(yàn)證等均可滿足。
4. 數(shù)據(jù)可視化場(chǎng)景
SpreadJS可用于將數(shù)據(jù)以圖表、迷你圖(Sparkline)、形狀(Shape)、條件格式等圖形化顯示，滿足交互式分析、Dashboard、OLAP、BI等數(shù)據(jù)可視化場(chǎng)景。
5. 在線文檔需求場(chǎng)景
SpreadJS 已將類 Excel 的界面嵌入 Web 應(yīng)用中，使最終用戶有能力直接通過(guò)瀏覽器完成各種文檔操作，點(diǎn)擊此處，免費(fèi)體驗(yàn) SpreadJS 在線表格編輯器。
第二部分 純前端表格控件 SpreadJS 典型案例介紹
華為 - 勘探設(shè)計(jì)部“eSurvey”
案例特點(diǎn)： 在采購(gòu)SpreadJS 之前，重度依賴 Excel 作為前期調(diào)研、資料收集、數(shù)據(jù)交互、方案設(shè)計(jì) + 審核的工具，積攢了大量的 Excel 文件需要進(jìn)行導(dǎo)入導(dǎo)出并現(xiàn)場(chǎng)打印，使用SpreadJS后，上述問(wèn)題均得到了解決。
江蘇稅軟 - 稅軟臺(tái)賬系統(tǒng)
案例特點(diǎn)： 由于稽查各部門、各環(huán)節(jié)缺少對(duì)查辦案件過(guò)程、結(jié)果、效率進(jìn)行詳細(xì)記錄，也沒(méi)有一個(gè)數(shù)據(jù)共享、交互、匯總平臺(tái)，導(dǎo)致在績(jī)效考核中，定性類指標(biāo)的考核通常爭(zhēng)議比較大。為進(jìn)一步提高稅務(wù)稽查執(zhí)法質(zhì)效，規(guī)范稅務(wù)稽查執(zhí)法行為，加強(qiáng)稽查績(jī)效考核，強(qiáng)化稽查內(nèi)控機(jī)制，防范執(zhí)法風(fēng)險(xiǎn)，因此開發(fā)了稅軟臺(tái)賬系統(tǒng)。該系統(tǒng)需要借助 SpreadJS 的無(wú)編碼模板設(shè)計(jì)器，實(shí)現(xiàn)Excel所有功能，而且流暢度要和本地的Excel幾乎相同。>>案例詳情
華閩通達(dá) - R 平臺(tái)應(yīng)用
案例特點(diǎn)： R 平臺(tái)采用了面向業(yè)務(wù)人員的開發(fā)模式，結(jié)合現(xiàn)代工業(yè)“流水線裝配”的生產(chǎn)理念，提供大量構(gòu)件，助力客戶項(xiàng)目快速搭建。SpreadJS 表格控件主要用于 R 平臺(tái) Excel 表格和基于單元格報(bào)表的定制，即支持瀏覽器展現(xiàn) Excel 格式、支持客戶端打印、支持在線報(bào)表模板編輯、在線填報(bào)以及和 Excel 一致的 UI。>>案例詳情
北京三維天地 - 實(shí)驗(yàn)室管理系統(tǒng)
案例特點(diǎn)： 客戶經(jīng)過(guò)多方評(píng)估，最終選擇 SpreadJS 進(jìn)行應(yīng)用系統(tǒng)開發(fā)，完成了系統(tǒng)數(shù)據(jù)展示，實(shí)現(xiàn)了數(shù)據(jù)綁定、采集、反存等功能，解決了以下兩個(gè)長(zhǎng)期困擾客戶的問(wèn)題：
1. 原系統(tǒng)為 B/S 架構(gòu)，沒(méi)有專門用于數(shù)據(jù)展示的部分，現(xiàn)在需要增加展示數(shù)據(jù)的模塊
2. 原系統(tǒng)無(wú)法實(shí)現(xiàn)數(shù)據(jù)綁定、展示、采集、反存等功能，此外還需要支持自定義公式以及前端 PDF 導(dǎo)出
使用SpreadJS后，上述問(wèn)題均得到了解決。>>案例詳情
中國(guó)能建 – 企業(yè)數(shù)據(jù)填報(bào)
案例特點(diǎn)： “企業(yè)數(shù)據(jù)填報(bào)系統(tǒng)”是中國(guó)能建安徽電建二公司內(nèi)部人員數(shù)據(jù)填報(bào)的軟件項(xiàng)目，應(yīng)用于各種公司各機(jī)構(gòu)數(shù)據(jù)填報(bào)審批，并上報(bào)公司總部進(jìn)行匯總分析。選擇 SpreadJS 主要考慮以下兩方面原因：
1. 高性能：SpreadJS 是一個(gè)基于 HTML5 技術(shù)的純 JavaScript 控件。不但提供了更高的渲染性能和更流暢的界面操作，此外，SpreadJS 通過(guò)一個(gè)高效的數(shù)據(jù)模型來(lái)快速操作數(shù)據(jù)，使得載入和操作超百萬(wàn)行數(shù)據(jù)變得更為方便且快捷。
2. 無(wú)編碼模板設(shè)計(jì)器：SpreadJS 提供在線表單設(shè)計(jì)器，其擴(kuò)展性高，無(wú)需編碼，不需要專業(yè)培訓(xùn)，即可快速上手。之前我們通過(guò) Excel 軟件設(shè)計(jì)的表格文檔，借助模板設(shè)計(jì)器，輕松導(dǎo)入 SpreadJS 中，提高了模板的復(fù)用性。>>案例詳情
德茂科技 – 財(cái)政預(yù)算經(jīng)費(fèi)審批與填報(bào)系統(tǒng)
案例特點(diǎn)： 財(cái)政預(yù)算經(jīng)費(fèi)審批與填報(bào)系統(tǒng)是茂名市財(cái)政業(yè)務(wù)信息化的一個(gè)重要組成部分，目的是打造一個(gè)高效的日常財(cái)政業(yè)務(wù)辦公流程。將財(cái)政預(yù)算的相關(guān)工作在信息化的系統(tǒng)中進(jìn)行。用戶需要一個(gè)高度兼容Excel的純前端控件，不僅樣式、公式兼容Excel，操作習(xí)慣也和Excel保持一致，在系統(tǒng)使用中完全可以拋棄掉原 Excel 程序，使所有工作在系統(tǒng)中完成。>>案例詳情
銀彈谷 – V3企業(yè)架構(gòu)平臺(tái)
案例特點(diǎn)： V3企業(yè)架構(gòu)平臺(tái)(簡(jiǎn)稱：V平臺(tái))是運(yùn)用先進(jìn)的管理思想和設(shè)計(jì)方法構(gòu)建的零編碼、支持配置化生產(chǎn)的新一代軟件開發(fā)平臺(tái)。之所以選擇 SpreadJS 是因?yàn)椋?/p>
1. 可以拋棄原插件版報(bào)表需要安裝插件的困擾，純H5頁(yè)面方式，沒(méi)有瀏覽器限制。
2. 繼續(xù)沿用原插件版的excel模式的設(shè)計(jì)器，符合報(bào)表設(shè)計(jì)者的開發(fā)習(xí)慣，不增加額外學(xué)習(xí)成本。
3. 原來(lái)配置開發(fā)的報(bào)表基本無(wú)需修改，平滑兼容、無(wú)縫對(duì)接。
4. 通過(guò) SpreadJS 擴(kuò)展出了更多功能，如報(bào)表連打、遠(yuǎn)程云打印、支持報(bào)表數(shù)據(jù)鉆取等。>>案例詳情
最后
希望通過(guò)本文介紹，使您對(duì) SpreadJS有了更深入的了解。同時(shí)，也希望文章中提到的產(chǎn)品核心功能和典型案例，為您在開發(fā)類Excel 表格應(yīng)用與跨平臺(tái)表格數(shù)據(jù)交互時(shí)，提供更全面的解決方案，助您更高效地處理 Web 端海量表格數(shù)據(jù)。
若需獲取更多SpreadJS 應(yīng)用案例，請(qǐng)?jiān)L問(wèn)SpreadJS官網(wǎng)(https://www.grapecity.com.cn/developer/spreadjs)。
關(guān)于葡萄城(https://www.grapecity.com.cn/)
賦能開發(fā)者!葡萄城集團(tuán)成立于 1980 年，是全球領(lǐng)先的集開發(fā)工具、商業(yè)智能解決方案、管理系統(tǒng)設(shè)計(jì)工具于一身的軟件和服務(wù)提供商。西安葡萄城是其在中國(guó)的分支機(jī)構(gòu)，面向全球市場(chǎng)提供軟件研發(fā)服務(wù)，并為中國(guó)企業(yè)的信息化提供國(guó)際先進(jìn)的開發(fā)工具、軟件和研發(fā)咨詢服務(wù)。葡萄城的控件和軟件產(chǎn)品在國(guó)內(nèi)外屢獲殊榮，在全球被數(shù)十萬(wàn)家企業(yè)、學(xué)校和政府機(jī)構(gòu)廣泛應(yīng)用。
