ActiveReportsJS是一款基于 HTML5的純前端報表控件，采用拖拽式報表開發模式，無需任何服務器和組件支持，即可在Mac、Linux 和 Windows 平臺中，輕松設計中國式復雜報表、類 Excel/Word報表、DashBoard儀表板等多種報表類型。除提供強大的報表設計能力之外，ActiveReportsJS還具備純前端報表展示、多數據源綁定、前端精準打印/導出等功能，借助其靈活豐富的API ，可為您帶來無與倫比的報表開發體驗。
在本篇文章中，您將學習如何快速使用這款報表工具，以及如何將ActiveReportsJS的強大功能嵌入到Web應用中。
一、產品下載
首先，請在此處下載ActiveReportsJS。產品安裝包中含有Mac、Linux、Windows三個平臺的安裝程序，請根據您的使用平臺自行選擇。
點擊下載ActiveReportsJS正式版
下載后，請解壓文件，并雙擊 .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文件。例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>ActiveReportsJS Demo</title>
<meta name="description" content="Demo application of ActiveReportsJS Viewer and Report file">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="app.js"></script>
</head>
<body>
</body>
</html>
在ActiveReportsJS的產品安裝包中，“dist” 文件夾中包含了我們需要添加到應用程序中的JS和CSS文件。
將dist文件夾的全部內容，復制到您的項目中：
ActiveReportsJS也可以通過NPM獲得，使用以下命令為基于Node的應用程序安裝報表組件：
npm i @grapecity/activereports
現在，我們準備在應用程序中使用ActiveReportsJS。
使用報表組件
要在應用程序中使用ActiveReportsJS，您需要在應用程序中添加其對JS和CSS文件的引用。
這些引用文件位于vendor 文件夾中，如下所示：
<script src="vendor/dist/ie-polyfills.full.js"></script>
<script src="vendor/dist/ar-js-core.js"></script>
<script src="vendor/dist/ar-js-viewer.js"></script>
<script src="vendor/dist/ar-js-pdf.js"></script>
<script src="vendor/dist/ar-js-xlsx.js"></script>
<script src="vendor/dist/ar-js-html.js"></script>
<link rel="stylesheet" href="vendor/styles/ar-js-viewer.css">
配置報表查看器
添加引用后，便可以使用報表組件了。
將報表查看器的宿主元素添加到頁面主體部分，如下所示：
<body>
<div id="viewer"></>
</body>
接下來，使用宿主元素的ID實例化報表查看器。
您也可以將其復制并寫入HTML的\標記中。本示例，以下代碼位于app.js文件中。
document.readyState === 'complete' ? init() : window.onload = init;
function init() {
const viewer = new ActiveReports.Viewer('#viewer');
viewer.open("./reports/myReport.rdlx-json");
}
init函數的第一條語句用來創建報表查看器組件。
第二行是將報表加載到查看器中。為了加載報表，您還需要將其添加到應用程序中。本示例，通過文件路徑顯示，報表位于reports文件夾中。
當然，另一種更常見的方法是從報表服務器中，直接打開報表。在這種情況下，您需要將URL傳遞給viewer.open（）。例：
function init() {
const viewer = new ActiveReports.Viewer('#viewer');
viewer.open("http://myreportservice.com/reports/../..");
}
五、查看報表
現在，您的應用程序已經可以正常使用ActiveReportsJS了。
您可以通過 VSCode Live Server或適用于Chrome的Web服務器進行預覽。
VSCode Live服務器集成了一個不錯的功能：啟動和停止服務器選項。
注：使用這些工具時，請確保其位于正確的文件夾中。
現在，我們就可以在瀏覽器中打開剛才配置的報表文件了。
ActiveReportsJS的基本使用方法就是這樣了，希望對您有所幫助哦。ActiveReportsJS還有更多創建或設計報表，敬請期待！您可以下載產品，親自體驗產品的各種功能~
想要購買ActiveReportsJS正版授權，或了解更多產品信息請點擊
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自：
半島外圍網上直營 
19次
相關產品
正式授權
最新文章 
半島外圍網上直營相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線