# ActiveReportsJS **Repository Path**: GrapeCity/active-reports-js ## Basic Information - **Project Name**: ActiveReportsJS - **Description**: No description available - **Primary Language**: Unknown - **License**: Apache-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 4 - **Forks**: 3 - **Created**: 2021-10-25 - **Last Updated**: 2025-08-15 ## Categories & Tags **Categories**: Uncategorized **Tags**: 在线报表设计器, web端设计器, 报表设计器, 纯前端报表控件, 报表控件 ## README # ActiveReportsJS #### 介绍 ActiveReportsJS 是一款基于 HTML5 的纯前端在线报表控件，通过拖拽式跨平台报表设计器和纯前端报表设计器，可以快速地设计 Excel报表、 [Word文档](https://www.grapecity.com.cn/developer/activereportsjs/scenarios/word)、 [移动端报表](https://www.grapecity.com.cn/developer/activereportsjs/scenarios/mobile)、图表、数据过滤、数据钻取、精准套打等类型报表，可全面满足 JavaScript、HTML5、Angular、Vue、React、PureJS ，Nodejs等项目开发的报表设计、展示、打印导出等需求。同时，通过丰富的API可以灵活的实现报表创建、加载和运行时的个性化自定义需求。 纯前端报表设计器是 ActiveReportsJS 提供的报表设计组件，可直接在 [Angular](https://demo.grapecity.com.cn/activereportsjs/demos/features/designer-integration/angular)、[React](https://demo.grapecity.com.cn/activereportsjs/demos/features/designer-integration/react)、 [Vue](https://demo.grapecity.com.cn/activereportsjs/demos/features/designer-integration/vue) 等前端框架中调用，内置开放的 API 可供开发人员使用，实现定制化的在线报表编辑器，为最终用户带来易用性和功能性都很强大的编辑器能力。 ### ActiveReportsJS 可以为报表开发者提供什么？ - 简单易用的Web报表设计器 集编辑、预览、导出为一体的 跨平台（纯前端）报表设计器，类 Office 设计体验，内置 矩表， 表格， 图表， 条码等十余种控件满足各类报表布局，让最终用户亦可自助设计中国式复杂报表 - 纯前端精准打印 ActiveReportsJS 通过其独有的分层设计，实现了精准前端 报表套打。即可以一次生成报表模板，批量打印，也可以采用分页设计模式，实现连续打印 - 一键导出报表 ActiveReportsJS 支持以“所见即所得”的方式，导出 PDF、Excel（XLSX）、HTML ，并可通过代码，在不预览报表的情况下直接导出报表并控制导出行为，一键导出，快捷高效 - 一流的框架支持及扩展与主流前端开发框架完美兼容 ActiveReportsJS 遵循 TypeScript 规范，可与当下主流前端开发框架，如 Angular、 React、 Vue 等完美集成。符合 UMD 规范，可按需加载，易于在 VSCode 中使用 - 高级 JSON 数据绑定功能 攻克开发难点 支持绑定 REST API、 OData、或 GraphQL 数据源，可配置 JSON 获取方式为 Post 或 Get，也可指定查询参数等数据链接信息，一键解析多层 JSON 数据嵌套 - 丰富的API 满足个性化集成需要 ActiveReportsJS 为在线设计器及 Viewer 提供了灵活且丰富的 API，可帮您构建风格一致的报表功能模块且与您的系统无缝对接，满足深度定制、无缝集成的需要 #### 仅需 3 步，即可在前端框架中嵌入报表功能 ![输入图片说明](https://www.grapecity.com.cn/images/metalsmith/developer/activereportsjs/index/%E4%B8%89%E6%AD%A5.png "在这里输入图片标题") ##### 极易使用的纯前端报表设计器 ActiveReportsJS 提供了极易使用的纯前端在线报表设计器，且易于集成到各种前端应用中，可设计各种复杂的报表类型： - 纯前端在线报表设计，无需安装即可实现在线编辑能力 - 采用拖拽的设计方式，快速创建数据透视表、复杂报表，Word报告报表 - 与前端主流框架，如 Angular、 React、 Vue一键集成使用 ![输入图片说明](https://www.grapecity.com.cn/images/metalsmith/developer/activereportsjs/index/videoposter.png "在这里输入图片标题") ##### 在 Web 页面，快速嵌入报表模块 只需简单的几行代码，即可将报表设计器及报表展示功能 嵌入到 Web 页面中： - 使用 Viewer 组件为应用程序的最终用户提供查看，导出和打印功能 - 使用 Web报表设计器组件可以使用户实现编辑报表 - 调用 集成 API定制报表Viewer或设计器功能 ![输入图片说明](https://www.grapecity.com.cn/images/metalsmith/developer/activereportsjs/index/step2.gif "在这里输入图片标题") ##### 无需编码实现交互功能 为设计器和报表展示工具提供了内置的功能按钮，只需设置属性即可实现高级交互功能 - 内置报表翻页，刷新，查找及浏览模式设置等功能按钮 - 提供下拉框，日历，多选框等为用户提供输入能力实现数据过滤 - 只需单属性设置实现 报表钻取及导出等功能 ![输入图片说明](https://www.grapecity.com.cn/images/metalsmith/developer/activereportsjs/index/%E5%86%85%E7%BD%AE%E6%89%93%E5%8D%B0.png "在这里输入图片标题") #### 强大的报表设计能力，满足多场景报表设计需求 **中国式复杂报表** 借助 ActiveReportsJS 独有的矩表组件、表格组件和图表组件，可快速创建类 Excel 透视表、多维数据透视表、自由的单元格合并报表、动态行列头报表。 ![输入图片说明](https://www.grapecity.com.cn/images/metalsmith/developer/activereportsjs/index/%E5%A4%8D%E6%9D%82%E6%8A%A5%E8%A1%A8.png "在这里输入图片标题") [查看详情](https://demo.grapecity.com.cn/activereportsjs/demos/features/control-specific/tablix/fuzajiaochabiao/purejs/) **动态、交互式报表** ActiveReportsJS 的设计器支持动态数据过滤、交互式排序、钻取及深化、动态数据列等功能，为实现智能化的业务分析，提供更具价值的解决方案。 ![输入图片说明](https://www.grapecity.com.cn/images/metalsmith/developer/activereportsjs/index/%E5%8A%A8%E6%80%81.png "在这里输入图片标题") [查看详情](https://demo.grapecity.com.cn/activereportsjs/demos/features/control-specific/wendangmulu/wendangmulu/purejs) **DashBoard 报表** 通过 DashBoard，为决策层提供关键数据的综合分析能力，让核心数据的变化一目了然。由 ActiveReportsJS 设计的 DashBoard 仪表板，可实时刷新业务数据，展示数据动态趋势。 ![输入图片说明](https://www.grapecity.com.cn/images/metalsmith/developer/activereportsjs/index/DashBoard.png?V=20201224 "在这里输入图片标题") [查看详情](https://demo.grapecity.com.cn/activereportsjs/demos/Reports/shuzihuayingxiao/purejs) **Word 文档类报表** 使用 ActiveReportsJS 可创建各类 Word 文档类报表，如质检报告、物料清单（BOM）等，实现图文与表格混排、项目编号、报表封皮/尾页、多页不同布局等类型的报表样式。 ![输入图片说明](https://www.grapecity.com.cn/images/metalsmith/developer/activereportsjs/index/word.png "在这里输入图片标题") [查看详情](https://demo.grapecity.com.cn/activereportsjs/demos/features/control-specific/word/xiaoshouhetongmoban/purejs) **条码报表** ActiveReportsJS 提供的条码组件，支持四十多种的条码格式，如 QRCode 和 Code128 等。使用条码组件，将大幅节省您寻找第三方条码工具所花费的时间。 ![输入图片说明](https://www.grapecity.com.cn/images/metalsmith/developer/activereportsjs/index/%E6%9D%A1%E7%A0%81.png "在这里输入图片标题") [查看详情](https://demo.grapecity.com.cn/activereportsjs/demos/features/control-specific/tiaoma/biaoqiandayin/purejs) #### ActiveReportsJS 主要功能 - 强大的报表设计能力 ActiveReportsJS 具备设计中国式复杂报表，以及交互式报表的能力，借助其强大的报表设计器和丰富的报表组件，可帮助用户轻松设计各种报表类型。 ![输入图片说明](https://www.grapecity.com.cn/images/metalsmith/developer/activereportsjs/index/function1.png "在这里输入图片标题") - 多种数据可视化方式 ActiveReportsJS 内置丰富的图表、迷你图、图标集样式，用以呈现并分析企业信息化系统中常见的数据可视化场景，帮助用户以直观、简洁的方式理解业务数据。 ![输入图片说明](https://www.grapecity.com.cn/images/metalsmith/developer/activereportsjs/index/function2.png "在这里输入图片标题") - 易用的表达式编辑器 内置 10 余种常量字段，如页码、总页数、用户信息等，可直接拖拽生成，提供超百种公式函数，如日期函数、数学函数、流程判断等，每个函数都有对应的说明、语法、示例，即使不懂技术，也可快速使用。 ![输入图片说明](https://www.grapecity.com.cn/images/metalsmith/developer/activereportsjs/index/%E8%A1%A8%E8%BE%BE%E5%BC%8F%E7%BC%96%E8%BE%91%E5%99%A8.png?v=20191212 "在这里输入图片标题") - 一次设计，到处运行 使用 ActiveReportsJS，用户只需完成一次报表设计，即可在跨平台、跨设备、跨操作系统中再次编辑和展示报表模板，无需重复的报表设计工作，大幅提升报表利用率。 ![输入图片说明](https://www.grapecity.com.cn/images/metalsmith/developer/activereportsjs/index/function4.png "在这里输入图片标题") - 一流的框架集成及扩展 ActiveReportsJS 遵循 TypeScript 规范，可与当下最流行的前端开发框架，如 Angular、React、Vue 等完美集成。 ![输入图片说明](https://www.grapecity.com.cn/images/metalsmith/developer/activereportsjs/index/%E6%A1%86%E6%9E%B6%E9%9B%86%E6%88%90.png "在这里输入图片标题") - 完美继承了 ActiveReports .NET ActiveReportsJS 继承了 ActiveReports .NET 的报表设计功能，并与之兼容。从 .NET 迁移到 Web ，无需重新设计报表，减少二次投入成本。 ![输入图片说明](https://www.grapecity.com.cn/images/metalsmith/developer/activereportsjs/index/%E5%85%BC%E5%AE%B9%E5%85%B3%E7%B3%BB%E5%9B%BE.png "在这里输入图片标题") [ **试用 ActiveReportsJS 纯前端在线报表控件** ](https://www.grapecity.com.cn/developer/activereportsjs/download)