ctiveReportsJS 是一款基于 HTML5 的純前端報(bào)表控件，采用拖拽式報(bào)表開(kāi)發(fā)模式，無(wú)需任何服務(wù)器和組件支持，即可在 Mac、Linux 和 Windows 平臺(tái)中，輕松設(shè)計(jì)中國(guó)式復(fù)雜報(bào)表、類 Excel/Word 報(bào)表、DashBoard 儀表板等多種報(bào)表類型。

通過(guò)本指南，您將學(xué)習(xí)如何快速使用這款報(bào)表工具，以及如何將ActiveReportsJS的強(qiáng)大功能嵌入到Web應(yīng)用中。

一、產(chǎn)品下載

首先，請(qǐng)先搜索在葡萄城官網(wǎng)下載 ActiveReportsJS。產(chǎn)品安裝包中含有Mac、Linux、Windows三個(gè)平臺(tái)的安裝程序，請(qǐng)根據(jù)您的使用平臺(tái)自行選擇。

下載后，請(qǐng)解壓文件，并雙擊 .dmg / .exe / .AppImage 程序，安裝報(bào)表設(shè)計(jì)器。

注：ActiveReportsJS 的安裝程序涵蓋：報(bào)表設(shè)計(jì)器、查看器和報(bào)表導(dǎo)出模塊。

二、創(chuàng)建一張JavaScript報(bào)表

從添加數(shù)據(jù)源到創(chuàng)建交互式報(bào)表，ActiveReportsJS簡(jiǎn)單易用的設(shè)計(jì)器使您無(wú)需編寫代碼，僅需拖拽的方式，即可完成復(fù)雜報(bào)表設(shè)計(jì)。

如需創(chuàng)建報(bào)表，請(qǐng)?jiān)谥鞑藛螜谥羞x擇“文件”選項(xiàng)。“文件”面板打開(kāi)后，您可選擇創(chuàng)建RDL報(bào)表或頁(yè)面報(bào)表。

• RDL報(bào)表的主要使用場(chǎng)景是：報(bào)表模板可根據(jù)渲染區(qū)域的大小自適應(yīng)。
• 頁(yè)面報(bào)表則由布局驅(qū)動(dòng)，更適合嚴(yán)格的布局，以及限制并保持固定大小的報(bào)表模板。

添加數(shù)據(jù)源

ActiveReportsJS 支持的數(shù)據(jù)源類型是JSON，您可以直接使用 JSON Web Services 服務(wù)來(lái)連接 JSON數(shù)據(jù)源。

或者，您也通過(guò)本地的 JSON文件添加數(shù)據(jù)源。 -json文件必須與報(bào)表位于同一文件夾或子文件夾中，因?yàn)锳ctiveReportsJS只支持?jǐn)?shù)據(jù)文件的相對(duì)路徑。

此外，ActiveReportsJS還支持在單張報(bào)表中添加多個(gè)數(shù)據(jù)源。

第一步，單擊右上子菜單中的“數(shù)據(jù)綁定”圖標(biāo)，打開(kāi)“數(shù)據(jù)綁定”面板。

單擊“數(shù)據(jù)源”下的“ +”按鈕，彈出以下對(duì)話框。

ActiveReportsJS支持以下數(shù)據(jù)源鏈接方式：

1. 使用本地JSON文件
2. 連接到報(bào)表服務(wù)器
3. 使用連接字符串

如果您要使用本地JSON文件，請(qǐng)將“ 內(nèi)嵌”更改為true。然后，單擊“從文件加載”并選擇可用的JSON數(shù)據(jù)文件。

要連接到報(bào)表服務(wù)器（外部URL），請(qǐng)將服務(wù)器的URI復(fù)制地址拷貝到“內(nèi)容URL”中，如默認(rèn)生成的鏈接格式：

jsondoc=http://northwind.netcore.io/customers?format=json

如果希望直接從本地?cái)?shù)據(jù)庫(kù)文件中加載，請(qǐng)點(diǎn)擊“外部文件或網(wǎng)址”, 通過(guò)“瀏覽”選擇可用的 JSON 文件，您也可以編輯自動(dòng)生成的連接字符串。如：

jsondoc=ProductInfo.json

完成數(shù)據(jù)源配置后，請(qǐng)單擊“添加數(shù)據(jù)源”完成此步驟。

第二步，創(chuàng)建數(shù)據(jù)集。（您可以通過(guò)點(diǎn)擊數(shù)據(jù)源旁邊的加號(hào)圖標(biāo)，從單個(gè)數(shù)據(jù)源中創(chuàng)建多個(gè)數(shù)據(jù)集）

數(shù)據(jù)集是獲取數(shù)據(jù)的最后一步，有了數(shù)據(jù)集，就可以訪問(wèn)到具體的數(shù)據(jù)字段。要?jiǎng)?chuàng)建數(shù)據(jù)集，您需要構(gòu)造一個(gè)查詢字符串，該字符串返回所需的數(shù)據(jù)字段。

例如，以下查詢字符串將返回Products數(shù)組中的所有元素。

$.Products[*]

單擊“驗(yàn)證”按鈕，可以確保查詢字符串捕獲正確的字段。當(dāng)驗(yàn)證成功后，會(huì)生成可綁定的字段，您也可以在數(shù)據(jù)集上使用過(guò)濾器。

點(diǎn)擊確認(rèn)按鈕，數(shù)據(jù)集就添加成功了，此時(shí)，數(shù)據(jù)集下方會(huì)展示可用的字段名稱。

三、設(shè)計(jì)你的報(bào)表模板

設(shè)置好數(shù)據(jù)源和數(shù)據(jù)集后，就可以開(kāi)始設(shè)計(jì)報(bào)表布局了。

ActiveReportsJS的設(shè)計(jì)器內(nèi)嵌了許多報(bào)表組件，在設(shè)計(jì)器左側(cè)的控制面板中展示了每個(gè)報(bào)表組件的圖標(biāo)。單擊“菜單”圖標(biāo)，可以展開(kāi)左側(cè)控制面板。

報(bào)表組件包括表格、條形碼、圖像、目錄、圖表等。

在此示例中，我將添加一個(gè)表格（Table）組件，并展示一些數(shù)據(jù)。

添加表格（Table）組件

您可通過(guò)雙擊或拖動(dòng)組件來(lái)使用它。將表格（Table）組件拖拽到設(shè)計(jì)器布局中，默認(rèn)情況下表格顯示為3行3列，這三行內(nèi)容分別為：

1. 表頭
2. 表格內(nèi)容
3. 表腳、頁(yè)腳

在“表格內(nèi)容”中，可以使用表達(dá)式綁定數(shù)據(jù)。您可根據(jù)運(yùn)行時(shí)數(shù)據(jù)集條目的數(shù)量，將其他行數(shù)據(jù)添加到此部分。

在報(bào)表設(shè)計(jì)時(shí)，您可以添加或刪除任意行列，也可以添加分組。

表格組件需要綁定數(shù)據(jù)字段來(lái)實(shí)現(xiàn)數(shù)據(jù)加載，您可以直接將字段列表中的某一字段拖拽到表格的單元格當(dāng)中，實(shí)現(xiàn)數(shù)據(jù)加載。

右鍵單擊表詳細(xì)信息行中的任何文本框（單元格），即可查看上下文菜單。

當(dāng)您將鼠標(biāo)懸停在單元格時(shí)，單元格中會(huì)出現(xiàn)一個(gè)“字段選擇裝飾器”的選項(xiàng)，單擊它，就可以選擇要綁定到單元格的字段。

執(zhí)行了“字段選擇裝飾器”后，單元格將包含選定值的表達(dá)式。在“表格內(nèi)容”中選擇表達(dá)式也會(huì)將該字段綁定到整個(gè)列。若要在單元格中顯示其他數(shù)據(jù)，請(qǐng)?jiān)?“表格內(nèi)容”中添加更多表達(dá)式。

在本示例中，我選擇了以下字段，并刪除了表腳。如果從數(shù)據(jù)集中選擇一個(gè)字段，表格的表頭部分將會(huì)自動(dòng)填充。

如上圖，最后一列是產(chǎn)品的總價(jià)值（單價(jià)*庫(kù)存單位）。

此時(shí)，點(diǎn)擊預(yù)覽報(bào)表，將顯示如下結(jié)果：

當(dāng)然，您還可以利用報(bào)表組件的“樣式屬性”強(qiáng)化其可視化效果：

四、將ActiveReportsJS添加到您的應(yīng)用程序中

ActiveReportsJS通過(guò)查看器來(lái)呈現(xiàn)報(bào)表模板。只需幾行代碼，即可將ActiveReportsJS查看器輕松嵌入到Web應(yīng)用程序中。

您需要將ActiveReportsJS的配置文件引用到此應(yīng)用程序。

配置（Setup）

首先創(chuàng)建一個(gè)簡(jiǎn)單的Web應(yīng)用程序，只需包含一個(gè)基本的HTML文件。

例：

在ActiveReportsJS的產(chǎn)品安裝包中，“dist” 文件夾中包含了我們需要添加到應(yīng)用程序中的JS和CSS文件。

將dist文件夾的全部?jī)?nèi)容，復(fù)制到您的項(xiàng)目中：

ActiveReportsJS也可以通過(guò)NPM獲得，使用以下命令為基于Node的應(yīng)用程序安裝報(bào)表組件：

npm i @grapecity/activereports

現(xiàn)在，我們準(zhǔn)備在應(yīng)用程序中使用ActiveReportsJS。

使用報(bào)表組件

要在應(yīng)用程序中使用ActiveReportsJS，您需要在應(yīng)用程序中添加其對(duì)JS和CSS文件的引用。

這些引用文件位于vendor 文件夾中，如下所示：

配置報(bào)表查看器

添加引用后，便可以使用報(bào)表組件了。

將報(bào)表查看器的宿主元素添加到頁(yè)面主體部分，如下所示：

接下來(lái)，使用宿主元素的ID實(shí)例化報(bào)表查看器。

您也可以將其復(fù)制并寫入HTML的<script>標(biāo)記中。本示例，以下代碼位于app.js文件中。

init函數(shù)的第一條語(yǔ)句用來(lái)創(chuàng)建報(bào)表查看器組件。

第二行是將報(bào)表加載到查看器中。為了加載報(bào)表，您還需要將其添加到應(yīng)用程序中。本示例，通過(guò)文件路徑顯示，報(bào)表位于reports文件夾中。

當(dāng)然，另一種更常見(jiàn)的方法是從報(bào)表服務(wù)器中，直接打開(kāi)報(bào)表。在這種情況下，您需要將URL傳遞給viewer.open（）。

例：

五、查看報(bào)表

現(xiàn)在，您的應(yīng)用程序已經(jīng)可以正常使用ActiveReportsJS了。

您可以通過(guò) VSCode Live Server或適用于Chrome的Web服務(wù)器進(jìn)行預(yù)覽。

VSCode Live服務(wù)器集成了一個(gè)不錯(cuò)的功能：?jiǎn)?dòng)和停止服務(wù)器選項(xiàng)。

注：使用這些工具時(shí)，請(qǐng)確保其位于正確的文件夾中。

現(xiàn)在，我們就可以在瀏覽器中打開(kāi)剛才配置的報(bào)表文件了。

以上，只是ActiveReportsJS的基本使用方法。除此之外，還有許多方法可以創(chuàng)建或設(shè)計(jì)報(bào)表。歡迎大家下載產(chǎn)品，立即體驗(yàn)ActiveReportsJS 的強(qiáng)大功能。

關(guān)于 ActiveReportsJS

ActiveReportsJS 是一款基于 HTML5 的純前端報(bào)表控件，采用拖拽式報(bào)表開(kāi)發(fā)模式，無(wú)需任何服務(wù)器和組件支持，即可在 Mac、Linux 和 Windows 平臺(tái)中，輕松設(shè)計(jì)中國(guó)式復(fù)雜報(bào)表、類 Excel/Word 報(bào)表、DashBoard 儀表板等多種報(bào)表類型。除提供強(qiáng)大的報(bào)表設(shè)計(jì)能力之外，ActiveReportsJS 還具備純前端報(bào)表展示、多數(shù)據(jù)源綁定、前端精準(zhǔn)打印/導(dǎo)出等功能，借助其靈活豐富的 API ，可為您帶來(lái)無(wú)與倫比的報(bào)表開(kāi)發(fā)體驗(yàn)。

點(diǎn)擊文末了解更多，查看更多產(chǎn)品特性。

evExpress ASP.NET MVC Reporting原生集成DevExpress ASP.NET MVC 擴(kuò)展以及無(wú)與倫比的設(shè)計(jì)時(shí)生產(chǎn)力。下面幾個(gè)典型示例展示了它強(qiáng)大的設(shè)計(jì)時(shí)功能，Web報(bào)表設(shè)計(jì)器、主從報(bào)表、并排打印，以及圖表、透視網(wǎng)格的添加。

你也可以下載Universal安裝包馬上體驗(yàn)更多示例哦！

Web報(bào)表設(shè)計(jì)器

可以在瀏覽器客戶端查看和編輯JavaScript/HTML5報(bào)表設(shè)計(jì)器。

| 在線Demo

主從報(bào)表

DevExpress ASP.NET MVC Reporting控件可以創(chuàng)建復(fù)雜的分層主從報(bào)表。本示例演示了一個(gè)展示了表格關(guān)系的帶有嵌套表格的主從報(bào)表。

| 在線Demo

并排打印報(bào)表

DevExpress ASP.NET MVC Reporting完美支持并排打印兩張報(bào)表，當(dāng)然也可以打印單個(gè)文檔。

| 在線Demo

支持添加圖表

DevExpress ASP.NET MVC Reporting可以輕松在任何帶狀報(bào)表中集成圖表。本示例展示了一個(gè)嵌入報(bào)表中的條形圖。

| 在線Demo

支持添加Pivot Grid

DevExpress ASP.NET MVC Reporting不僅可以添加圖表，還可以添加 Pivot Grid，可以綁定報(bào)表的數(shù)據(jù)源。本實(shí)例演示插入報(bào)表中的透視網(wǎng)格。

| 在線Demo

如果您要購(gòu)買DevExpress或者對(duì)產(chǎn)品還存在疑問(wèn)，請(qǐng)咨詢我們的在線客服>>

{@@_update}

本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯

列視（RCV）生產(chǎn)數(shù)據(jù)應(yīng)用系統(tǒng)：一套基于HTML5技術(shù)的web生產(chǎn)報(bào)表系統(tǒng)，系統(tǒng)以實(shí)時(shí)數(shù)據(jù)庫(kù)+人工填報(bào)數(shù)據(jù)為主要數(shù)據(jù)來(lái)源，實(shí)現(xiàn)了生產(chǎn)數(shù)據(jù)的自助式、自動(dòng)化、智能化、可視化應(yīng)用。該產(chǎn)品面向生產(chǎn)型企業(yè)，可作為生產(chǎn)指標(biāo)統(tǒng)計(jì)、指標(biāo)治理、生產(chǎn)數(shù)據(jù)整合、生產(chǎn)報(bào)表制作、常規(guī)基于表格的數(shù)據(jù)分析等工具平臺(tái)使用，通過(guò)該產(chǎn)品，業(yè)務(wù)人員(最終使用人員)可輕松自助搭建多人協(xié)作填報(bào)、性能計(jì)算、對(duì)標(biāo)分析、關(guān)鍵指標(biāo)預(yù)警、班值競(jìng)賽、超溫越限監(jiān)測(cè)、設(shè)備啟停、監(jiān)督報(bào)表、生產(chǎn)日?qǐng)?bào)、指標(biāo)駕駛艙、在線試驗(yàn)、雙碳核查、成本分析、能量平衡分析、固廢平衡……等業(yè)務(wù)應(yīng)用，產(chǎn)品提供了國(guó)內(nèi)外少見(jiàn)的基于實(shí)時(shí)數(shù)據(jù)庫(kù)的生產(chǎn)數(shù)據(jù)應(yīng)用建設(shè)平臺(tái)的解決方案。

Smartbi（思邁特）：企業(yè)級(jí)商業(yè)智能BI和大數(shù)據(jù)分析品牌，滿足用戶在企業(yè)級(jí)報(bào)表、數(shù)據(jù)可視化分析、自助分析平臺(tái)、數(shù)據(jù)挖掘建模、AI智能分析等大數(shù)據(jù)分析需求。致力于打造產(chǎn)品銷售、產(chǎn)品整合、產(chǎn)品應(yīng)用的生態(tài)系統(tǒng)，與上下游廠商、專業(yè)實(shí)施伙伴和銷售渠道伙伴共同為最終用戶服務(wù)，通過(guò)Smartbi應(yīng)用商店（BI+行業(yè)應(yīng)用）為客戶提供場(chǎng)景化、行業(yè)化數(shù)據(jù)分析應(yīng)用。

FineReport（帆軟報(bào)表工具）：由帆軟自主研發(fā)的一款純Java編寫的報(bào)表軟件產(chǎn)品，集數(shù)據(jù)展示（報(bào)表）和數(shù)據(jù)錄入(表單)功能于一身，能夠制作復(fù)雜的報(bào)表，操作簡(jiǎn)單易用。針對(duì)軟件開(kāi)發(fā)商和系統(tǒng)集成商，用于快速構(gòu)建企業(yè)信息系統(tǒng)的中國(guó)式Web報(bào)表軟件。

潤(rùn)乾報(bào)表：用于統(tǒng)計(jì)報(bào)表制作及報(bào)表及數(shù)據(jù)填報(bào)的大型企業(yè)級(jí)工具軟件。產(chǎn)品首次成功解決了報(bào)表單元格與關(guān)系數(shù)據(jù)庫(kù)之間的關(guān)聯(lián)規(guī)律性，特別適合于中國(guó)式報(bào)表的填報(bào)和統(tǒng)計(jì)。

通過(guò)對(duì)它們的了解，我也簡(jiǎn)單掌握了各自的特點(diǎn)：

行列視：以實(shí)時(shí)數(shù)據(jù)庫(kù)為主要數(shù)據(jù)來(lái)源，主要解決生產(chǎn)統(tǒng)計(jì)報(bào)表，界面仿照Excel設(shè)計(jì)，兼容Excel大部分格式、函數(shù)等元素，具有展示頁(yè)面級(jí)數(shù)據(jù)分析功能，用戶主要面向?qū)嵤┤藛T或最終用戶。

Smartbi（思邁特）：報(bào)表設(shè)計(jì)以插件的形式集成在Excel中，以真Excel為平臺(tái)進(jìn)行報(bào)表設(shè)計(jì)，報(bào)表發(fā)布為網(wǎng)頁(yè)，可以實(shí)現(xiàn)BI分析，用戶主要是業(yè)務(wù)實(shí)施人員或具有SQL能力的開(kāi)發(fā)者。

FineReport（帆軟報(bào)表工具）：提供獨(dú)立的報(bào)表設(shè)計(jì)界面，主要解決業(yè)務(wù)管理問(wèn)題，輕松實(shí)現(xiàn)業(yè)務(wù)數(shù)據(jù)的增、刪、查、改，提供BI分析功能，界面展示采用網(wǎng)頁(yè)形式，用戶主要面向業(yè)務(wù)實(shí)施人員或具有SQL能力的開(kāi)發(fā)者。

潤(rùn)乾報(bào)表：專業(yè)報(bào)表工具，適用于被集成環(huán)境，服務(wù)于集成商客戶，界面可以與Excel進(jìn)行轉(zhuǎn)換，用戶為開(kāi)發(fā)人員。