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

點擊下載ActiveReportsJS正式版

ActiveReportsJS的報表設計器，是一款集編輯、預覽、導出為一體的跨平臺報表設計器，拖拽式報表開發(fā)模式，內置矩表、表格、圖表等組件，無需任何服務器和組件支持，即可在 Mac、Linux、Windows 等平臺中，快速創(chuàng)建中國式復雜報表和各種交互式報表。

ActiveReportsJS 報表設計器的組成

設計界面

您可以使用“設計界面”左側工具箱中的報表組件來創(chuàng)建報表。

在工具箱面板中，列出了所有可用組件，通過雙擊或將組件拖放到設計器中進行使用。

除了可用組件外，左側面板還包含了“報告資源管理器”，用來顯示報表的所有元素和控件種類。

數(shù)據(jù)面板

在設計器的右側，為“數(shù)據(jù)面板”，可用于配置數(shù)據(jù)源和數(shù)據(jù)集。

屬性面板

在數(shù)據(jù)面板下方，還有屬性面板。在這里，您將找到所選控件或元素的屬性。

默認情況下，“屬性面板”顯示的是各元素最常用屬性，您可以切換到“高級模式”以顯示所選控件或元素的所有屬性。

“屬性面板”具備搜索功能，可用于搜索屬性。

ActiveReportsJS 報表設計器的功能特點

數(shù)據(jù)源

ActiveReportsJS支持使用 ** JSON ** 數(shù)據(jù)源來構建報表，這是一種輕量級且基于文本的可讀格式。除了 .json 文件之外，任何具有有效JSON格式的文件都可以用作數(shù)據(jù)源。

表達式

表達式用于設置報表中各控件的值，或用于設置某些樣式的條件。

交互式報表設計

ActiveReportsJS 的設計器支持鉆取、數(shù)據(jù)深化、交互式排序等功能。交互式報表提供了更加動態(tài)、靈活的數(shù)據(jù)分析能力。若需了解更多信息，請參閱ActiveReportsJS 交互式功能。

參數(shù)

參數(shù)可用于數(shù)據(jù)集查詢，您可以添加單個或多個值參數(shù)，選擇提示用戶輸入?yún)?shù)或完全隱藏參數(shù)。

報表控件

“頁面報表”和“RDL報表”工具箱提供了許多報表控件，用于在創(chuàng)建報表時進行可視化設計。了解詳細信息，請參閱ActiveReportsJS 報表控件。

如何使用ActiveReportsJS設計器創(chuàng)建報表

如視頻中演示的那樣，我們創(chuàng)建一張簡單的報表，該報表從數(shù)據(jù)庫中加載了一些數(shù)據(jù)并將其顯示在表格內。

第一步，創(chuàng)建報表

打開“文件”菜單，選擇RDL報表。

第二步，轉到數(shù)據(jù)面板并添加數(shù)據(jù)源。

使用嵌入式文件選項，加載帶有數(shù)據(jù)條目的JSON文件。完成后，JSON文件的內容將顯示在“嵌入式內容”框中。此時，讓我們將數(shù)據(jù)源的默認名稱更改為更具代表性的名稱，然后單擊“添加數(shù)據(jù)源”。

第三步，創(chuàng)建一個數(shù)據(jù)集，用以查詢并選擇您感興趣的數(shù)據(jù)字段。

在查詢字段中，選擇JSON文件的所有內容。在左側面板上，打開工具箱并找到Table組件。雙擊以將Table放置在報表設計器界面上。

第四步，擴展表格的寬度并添加幾列。

默認情況下，表格共顯示三行。第一行是表頭，中間是表格內容，最下面一行是表腳。

要添加列，請選擇“表頭”，單擊鼠標右鍵，然后選擇“ COLUMNSRIGHT”或“ LEFT”，在所選列的右或左插入一列。

要在表中綁定數(shù)據(jù)，只需在“表格內容”部分單擊ADORNERS，從數(shù)據(jù)集中選擇可用字段。

最后一步，預覽報表。

單擊工具欄上的預覽按鈕，就可以實時預覽到結果。

要返回設計界面，請單擊左上方的“后退”箭頭。

要保存這張報表模板，請轉到“文件”菜單，然后單擊“保存”或“另存為”。

注：ActiveReportsJS的報表文件另存為“ .rdlx-json”格式。

至此，一張簡單的報表就已經(jīng)創(chuàng)建完成了，您可以將它添加到應用程序中，并使用報表查看器進行查看。

本教程內容就是這樣了，希望對您有所幫助！您可以下載ActiveReportsJS試用版免費體驗~

相關內容推薦：

純前端報表控件 ActiveReportsJS入門教程：如何將ActiveReportsJS的強大功能嵌入到Web應用