ActiveReportsJS 是一款基于 HTML5 的純前端報表控件，采用拖拽式報表開發模式，無需任何服務器和組件支持，即可在 Mac、Linux 和 Windows 平台中，輕松設計中國式複雜報表、類 Excel/Word 報表、DashBoard 儀表闆等多種報表類型。

　　通過本指南，您将學習如何快速使用這款報表工具，以及如何将ActiveReportsJS的強大功能嵌入到Web應用中。

　　一、産品下載 首先，請先搜索在葡萄城官網下載 ActiveReportsJS。産品安裝包中含有Mac、Linux、Windows三個平台的安裝程序，請根據您的使用平台自行選擇。

　　下載後，請解壓文件，并雙擊 .dmg / .exe / .AppImage 程序，安裝報表設計器。

　　注：ActiveReportsJS 的安裝程序涵蓋：報表設計器、查看器和報表導出模塊。

　　二、創建一張JavaScript報表 從添加數據源到創建交互式報表，ActiveReportsJS簡單易用的設計器使您無需編寫代碼，僅需拖拽的方式，即可完成複雜報表設計。

　　如需創建報表，請在主菜單欄中選擇“文件”選項。“文件”面闆打開後，您可選擇創建RDL報表或頁面報表。

　　RDL報表的主要使用場景是：報表模闆可根據渲染區域的大小自适應。頁面報表則由布局驅動，更适合嚴格的布局，以及限制并保持固定大小的報表模闆。

　　添加數據源

　　ActiveReportsJS 支持的數據源類型是JSON，您可以直接使用 JSON Web Services 服務來連接 JSON數據源。

　　或者，您也通過本地的 JSON文件添加數據源。 -json文件必須與報表位于同一文件夾或子文件夾中，因為ActiveReportsJS隻支持數據文件的相對路徑。

　　此外，ActiveReportsJS還支持在單張報表中添加多個數據源。

　　第一步，單擊右上子菜單中的“數據綁定”圖标，打開“數據綁定”面闆。

　　單擊“數據源”下的“ ”按鈕，彈出以下對話框。

　　ActiveReportsJS支持以下數據源鍊接方式：

　　使用本地JSON文件連接到報表服務器使用連接字符串

　　如果您要使用本地JSON文件，請将“ 内嵌”更改為true。然後，單擊“從文件加載”并選擇可用的JSON數據文件。

　　要連接到報表服務器（外部URL），請将服務器的URI複制地址拷貝到“内容URL”中，如默認生成的鍊接格式：

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

　　如果希望直接從本地數據庫文件中加載，請點擊“外部文件或網址”, 通過“浏覽”選擇可用的 JSON 文件，您也可以編輯自動生成的連接字符串。如：

　　jsondoc=ProductInfo.json

　　完成數據源配置後，請單擊“添加數據源”完成此步驟。

　　第二步，創建數據集。（您可以通過點擊數據源旁邊的加号圖标，從單個數據源中創建多個數據集）

　　數據集是獲取數據的最後一步，有了數據集，就可以訪問到具體的數據字段。要創建數據集，您需要構造一個查詢字符串，該字符串返回所需的數據字段。

　　例如，以下查詢字符串将返回Products數組中的所有元素。

　　$.Products[*]

　　單擊“驗證”按鈕，可以确保查詢字符串捕獲正确的字段。當驗證成功後，會生成可綁定的字段，您也可以在數據集上使用過濾器。

　　點擊确認按鈕，數據集就添加成功了，此時，數據集下方會展示可用的字段名稱。

　　三、設計你的報表模闆 設置好數據源和數據集後，就可以開始設計報表布局了。

　　ActiveReportsJS的設計器内嵌了許多報表組件，在設計器左側的控制面闆中展示了每個報表組件的圖标。單擊“菜單”圖标，可以展開左側控制面闆。

　　報表組件包括表格、條形碼、圖像、目錄、圖表等。

　　在此示例中，我将添加一個表格（Table）組件，并展示一些數據。

　　添加表格（Table）組件

　　您可通過雙擊或拖動組件來使用它。将表格（Table）組件拖拽到設計器布局中，默認情況下表格顯示為3行3列，這三行内容分别為：

　　表頭表格内容表腳、頁腳 在“表格内容”中，可以使用表達式綁定數據。您可根據運行時數據集條目的數量，将其他行數據添加到此部分。

　　在報表設計時，您可以添加或删除任意行列，也可以添加分組。

　　表格組件需要綁定數據字段來實現數據加載，您可以直接将字段列表中的某一字段拖拽到表格的單元格當中，實現數據加載。

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

　　當您将鼠标懸停在單元格時，單元格中會出現一個“字段選擇裝飾器”的選項，單擊它，就可以選擇要綁定到單元格的字段。

　　執行了“字段選擇裝飾器”後，單元格将包含選定值的表達式。在“表格内容”中選擇表達式也會将該字段綁定到整個列。若要在單元格中顯示其他數據，請在 “表格内容”中添加更多表達式。

　　在本示例中，我選擇了以下字段，并删除了表腳。如果從數據集中選擇一個字段，表格的表頭部分将會自動填充。

　　如上圖，最後一列是産品的總價值（單價*庫存單位）。

　　此時，點擊預覽報表，将顯示如下結果：

　　當然，您還可以利用報表組件的“樣式屬性”強化其可視化效果：

　　四、将ActiveReportsJS添加到您的應用程序中 ActiveReportsJS通過查看器來呈現報表模闆。隻需幾行代碼，即可将ActiveReportsJS查看器輕松嵌入到Web應用程序中。

　　您需要将ActiveReportsJS的配置文件引用到此應用程序。

　　配置（Setup）

　　首先創建一個簡單的Web應用程序，隻需包含一個基本的HTML文件。

　　例：

　　在ActiveReportsJS的産品安裝包中，“dist” 文件夾中包含了我們需要添加到應用程序中的JS和CSS文件。

　　将dist文件夾的全部内容，複制到您的項目中：

　　ActiveReportsJS也可以通過NPM獲得，使用以下命令為基于Node的應用程序安裝報表組件：

　　npm i @grapecity/activereports

　　現在，我們準備在應用程序中使用ActiveReportsJS。

　　使用報表組件

　　要在應用程序中使用ActiveReportsJS，您需要在應用程序中添加其對JS和CSS文件的引用。

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

　　配置報表查看器

　　添加引用後，便可以使用報表組件了。

　　将報表查看器的宿主元素添加到頁面主體部分，如下所示：

　　接下來，使用宿主元素的ID實例化報表查看器。

　　您也可以将其複制并寫入HTML的script标記中。本示例，以下代碼位于app.js文件中。

　　init函數的第一條語句用來創建報表查看器組件。

　　第二行是将報表加載到查看器中。為了加載報表，您還需要将其添加到應用程序中。本示例，通過文件路徑顯示，報表位于reports文件夾中。

　　當然，另一種更常見的方法是從報表服務器中，直接打開報表。在這種情況下，您需要将URL傳遞給viewer.open（）。

　　例：

　　五、查看報表 現在，您的應用程序已經可以正常使用ActiveReportsJS了。

　　您可以通過 VSCode Live Server或适用于Chrome的Web服務器進行預覽。

　　VSCode Live服務器集成了一個不錯的功能：啟動和停止服務器選項。

　　注：使用這些工具時，請确保其位于正确的文件夾中。

　　現在，我們就可以在浏覽器中打開剛才配置的報表文件了。

　　以上，隻是ActiveReportsJS的基本使用方法。除此之外，還有許多方法可以創建或設計報表。歡迎大家下載産品，立即體驗ActiveReportsJS 的強大功能。

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

　　點擊文末了解更多，查看更多産品特性。

　　,