整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
ctiveReportsJS 是一款基于 HTML5 的純前端報表控件，采用拖拽式報表開發模式，無需任何服務器和組件支持，即可在 Mac、Linux 和 Windows 平臺中，輕松設計中國式復雜報表、類 Excel/Word 報表、DashBoard 儀表板等多種報表類型。
通過本指南，您將學習如何快速使用這款報表工具，以及如何將ActiveReportsJS的強大功能嵌入到Web應用中。
首先，請先搜索在葡萄城官網下載 ActiveReportsJS。產品安裝包中含有Mac、Linux、Windows三個平臺的安裝程序，請根據您的使用平臺自行選擇。
下載后，請解壓文件，并雙擊 .dmg / .exe / .AppImage 程序，安裝報表設計器。
注：ActiveReportsJS 的安裝程序涵蓋：報表設計器、查看器和報表導出模塊。
從添加數據源到創建交互式報表，ActiveReportsJS簡單易用的設計器使您無需編寫代碼，僅需拖拽的方式，即可完成復雜報表設計。
如需創建報表，請在主菜單欄中選擇“文件”選項。“文件”面板打開后，您可選擇創建RDL報表或頁面報表。
添加數據源
ActiveReportsJS 支持的數據源類型是JSON，您可以直接使用 JSON Web Services 服務來連接 JSON數據源。
或者，您也通過本地的 JSON文件添加數據源。 -json文件必須與報表位于同一文件夾或子文件夾中，因為ActiveReportsJS只支持數據文件的相對路徑。
此外，ActiveReportsJS還支持在單張報表中添加多個數據源。
第一步，單擊右上子菜單中的“數據綁定”圖標，打開“數據綁定”面板。
單擊“數據源”下的“ +”按鈕，彈出以下對話框。
ActiveReportsJS支持以下數據源鏈接方式：
如果您要使用本地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查看器輕松嵌入到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 是一款基于 HTML5 的純前端報表控件，采用拖拽式報表開發模式，無需任何服務器和組件支持，即可在 Mac、Linux 和 Windows 平臺中，輕松設計中國式復雜報表、類 Excel/Word 報表、DashBoard 儀表板等多種報表類型。除提供強大的報表設計能力之外，ActiveReportsJS 還具備純前端報表展示、多數據源綁定、前端精準打印/導出等功能，借助其靈活豐富的 API ，可為您帶來無與倫比的報表開發體驗。
點擊文末了解更多，查看更多產品特性。
evExpress ASP.NET MVC Reporting原生集成DevExpress ASP.NET MVC 擴展以及無與倫比的設計時生產力。下面幾個典型示例展示了它強大的設計時功能，Web報表設計器、主從報表、并排打印，以及圖表、透視網格的添加。
你也可以下載Universal安裝包馬上體驗更多示例哦！
Web報表設計器
可以在瀏覽器客戶端查看和編輯JavaScript/HTML5報表設計器。
| 在線Demo
主從報表
DevExpress ASP.NET MVC Reporting控件可以創建復雜的分層主從報表。本示例演示了一個展示了表格關系的帶有嵌套表格的主從報表。
| 在線Demo
并排打印報表
DevExpress ASP.NET MVC Reporting完美支持并排打印兩張報表，當然也可以打印單個文檔。
| 在線Demo
支持添加圖表
DevExpress ASP.NET MVC Reporting可以輕松在任何帶狀報表中集成圖表。本示例展示了一個嵌入報表中的條形圖。
| 在線Demo
支持添加Pivot Grid
DevExpress ASP.NET MVC Reporting不僅可以添加圖表，還可以添加 Pivot Grid，可以綁定報表的數據源。本實例演示插入報表中的透視網格。
| 在線Demo
如果您要購買DevExpress或者對產品還存在疑問，請咨詢我們的在線客服>>
{@@_update}
本站文章除注明轉載外，均為本站原創或翻譯
列視（RCV）生產數據應用系統：一套基于HTML5技術的web生產報表系統，系統以實時數據庫+人工填報數據為主要數據來源，實現了生產數據的自助式、自動化、智能化、可視化應用。該產品面向生產型企業，可作為生產指標統計、指標治理、生產數據整合、生產報表制作、常規基于表格的數據分析等工具平臺使用，通過該產品，業務人員(最終使用人員)可輕松自助搭建多人協作填報、性能計算、對標分析、關鍵指標預警、班值競賽、超溫越限監測、設備啟停、監督報表、生產日報、指標駕駛艙、在線試驗、雙碳核查、成本分析、能量平衡分析、固廢平衡……等業務應用，產品提供了國內外少見的基于實時數據庫的生產數據應用建設平臺的解決方案。
Smartbi（思邁特）：企業級商業智能BI和大數據分析品牌，滿足用戶在企業級報表、數據可視化分析、自助分析平臺、數據挖掘建模、AI智能分析等大數據分析需求。致力于打造產品銷售、產品整合、產品應用的生態系統，與上下游廠商、專業實施伙伴和銷售渠道伙伴共同為最終用戶服務，通過Smartbi應用商店（BI+行業應用）為客戶提供場景化、行業化數據分析應用。
FineReport（帆軟報表工具）：由帆軟自主研發的一款純Java編寫的報表軟件產品，集數據展示（報表）和數據錄入(表單)功能于一身，能夠制作復雜的報表，操作簡單易用。針對軟件開發商和系統集成商，用于快速構建企業信息系統的中國式Web報表軟件。
潤乾報表：用于統計報表制作及報表及數據填報的大型企業級工具軟件。產品首次成功解決了報表單元格與關系數據庫之間的關聯規律性，特別適合于中國式報表的填報和統計。
通過對它們的了解，我也簡單掌握了各自的特點：
行列視：以實時數據庫為主要數據來源，主要解決生產統計報表，界面仿照Excel設計，兼容Excel大部分格式、函數等元素，具有展示頁面級數據分析功能，用戶主要面向實施人員或最終用戶。
Smartbi（思邁特）：報表設計以插件的形式集成在Excel中，以真Excel為平臺進行報表設計，報表發布為網頁，可以實現BI分析，用戶主要是業務實施人員或具有SQL能力的開發者。
FineReport（帆軟報表工具）：提供獨立的報表設計界面，主要解決業務管理問題，輕松實現業務數據的增、刪、查、改，提供BI分析功能，界面展示采用網頁形式，用戶主要面向業務實施人員或具有SQL能力的開發者。
潤乾報表：專業報表工具，適用于被集成環境，服務于集成商客戶，界面可以與Excel進行轉換，用戶為開發人員。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
