ActiveReportsJS3.0 详解 ActiveReportsJS3.X

ActiveReportsJS：3.0 版中的新增功能-插图不对应实际功能，请留意
表格数据导出
有时您可能希望导出报告数据以进行进一步处理。例如，您想将导出的数据加载到 Excel 工作表中，并使用特定的分析函数对其进行分析。ActiveReportsJS 提供 Excel 导出功能，但其唯一目的是让您能够在发送打印之前修改报表输出。

Excel Export有几个限制，使得很难将输出用于数据处理。为了解决这个问题，我们引入了Tabular Data Export. 目前，它支持CSV输出格式并导出Table和Tablix数据区域生成的数据。

如果报告包含多个表格或表格，表格数据导出可以选择生成多个文件并将它们放入单个 ZIP 存档中。您可以轻松地将表格数据导出的输出导入 Excel 表格。

您可以在导出报告页面上找到更多信息。

图表向导
ActiveReportsJS 中的图表数据区域提供了丰富的可视化。

在 ActiveReportsJS 3.0 中，我们引入了全新的图表向导，您只需单击几下即可创建高级图表。

性能改进
许多报告广泛使用日期。例如，销售报告可以使用图表数据区域按月、年或周显示销售摘要。对于此类报表，报表引擎需要有效地执行多个相关任务：

从报告数据中解析日期。ActiveReportsJS 仅支持将日期保存为字符串的 JSON 数据格式，

格式化日期，以便报告输出根据需要显示它们

提取日期部分，例如月份或年份

在 ActiveReportsJS v3.0 中，我们改进了这些操作的性能，广泛使用日期的报告现在速度提高了 30%。

此外，我们改进了Report Viewer 组件中的数据处理，以便更有效地处理参数化报告。

图像数据 URL 支持
数据 URL 允许我们在报告数据中嵌入图像。ActiveReportsJS 现在支持带有源的图像报告项的数据 URL 。如果数据集包含其值为图像数据 URL 的字段，则您可以将图像报告项的属性设置为字段引用、属性设置为，并将属性设置为图像类型 -对于 PNG 图像、对于 JPEG 图像和用于 SVG 图像。

ActiveReportsJS：简介
ActiveReportsJS是一种用于在前端应用程序中可视化数据的报告解决方案。该产品包括一个独立的多平台设计器应用程序，允许通过使用一组丰富的控件来构建报告模板，包括但不限于：

桌子

列表

图表和迷你图

数据透视表

条码

目录

报告模板可以绑定到开发人员选择的 JSON 数据源：

嵌入式静态数据

REST API 端点

OData 端点

GraphQL 端点

网络服务

丰富的 API 允许您根据环境设置在运行时修改数据绑定。

报表设计器组件可在 Web 应用程序中使用，为最终用户提供在运行时自定义报表的能力。查看使用报表设计器组件的快速指南和在线演示：

React.js 应用程序

角应用

Vue 应用程序

纯 Javascript 应用程序

报表查看器组件支持与各种前端解决方案的集成：

反应.js

角

Vue

Vite.js

纯 JavaScript

报告查看器界面为应用程序的用户显示报告输出，并提供多种与之交互的方式：

分页

多种视图模式

主从报表的钻取和向下钻取

运行时排序

书签和目录

导出为 PDF、HTML 和表格数据

打印

ActiveReportsJS 组件随TypeScript 声明一起提供。严格类型允许您在早期阶段捕获错误并使用代码完成和自动重构等功能。Typescript 的最低要求版本是 3.7。

 

灵活的许可模式让您可以在多个选项中进行选择，并根据多个参数做出决策。

ActiveReportsJS 报表查看器：概述
ActiveReportsJS 报表查看器是一个 JavaScript 组件，可以集成到各种前端解决方案中，并允许用户查看、导出和打印报表。丰富的API为开发者提供了无限的 UI 定制和本地化能力。多个互操作组件确保与 Angular、React 和 Vue 应用程序的开箱即用简化集成。要了解有关这些主题的更多信息，请查看以下教程：

 

支持的环境
用户界面
加载报告
角组件
反应组件
Vue 组件
纯 JavaScript 集成
用户界面定制
主题
用户界面本地化
导出报告
打印报告

 

ActiveReportsJS 报表设计器：概述
ActiveReportsJS 报表设计器是一个 JavaScript 组件，可以集成到各种前端解决方案中，并允许用户创建新的或修改现有的报表。报表设计器与报表查看器组件一起为前端应用程序提供完整的报表解决方案。多个互操作组件确保与 Angular、React 和 Vue 应用程序的开箱即用简化集成。要了解有关这些主题的更多信息，请查看以下教程：

支持的环境
用户界面
一体化
动作处理程序
加载报告
保存报告
预览报告
使用预定义的数据源
使用预定义资源
本土化
主题

报表设计器界面
报表设计器允许您创建和修改报表模板。它的用户界面由以下描述的几个组件组成。

工具箱
Toolbox枚举可用的报告项。默认情况下，工具箱显示图标，但您可以使用hamburger设计器左上角的菜单将其展开以查看报告项名称。要将报表项添加到报表中，您可以双击工具箱中的相应项或将其拖放到特定的报表区域中。

展开以观看添加报告项的实际操作
报告浏览器
允许您浏览报告结构并快速选择报告项目Report Explorer或其部分。要打开报表资源管理器，请单击设计器左上角打开工具箱tree按钮下方的图标。您还可以使用相应的按钮固定报表资源管理器以使其保持打开状态。单击分层报告结构中的项目以将其选中。

展开以观看使用报告浏览器的实际操作
组编辑
可Group Editor用于导航Tablix结构并通过添加或删除 Tablix 成员快速修改它。要打开组编辑器，请单击设计器左上角打开报表浏览器按钮下方的图标。您还可以使用相应的按钮固定组编辑器以使其保持打开状态。查看Tablix 文档以了解有关使用组编辑器的更多信息。

工具栏
Toolbar位于报表设计器顶部的 允许您、cut和copy一个报表项paste，delete还可以配置其文本属性。

使用工具栏展开观看
报告布局
这Report Layout是一个页面形式的可视表面，显示报告项目并允许选择和重新排列它们。您可以使用报表设计器右下角的 UI 元素来配置此页面表面的各种设计时属性。

 

使用Grid按钮显示或隐藏网格。
使用Zoom out、Zoom in或Zoom level按钮设置缩放级别。
使用磁铁状图标的下拉菜单设置Grid Size，并配置以下选项。
Snap to Grid- 如果启用，则报告项目的位置和大小将与网格点对齐。
Snap to Guides- 如果启用，报表设计器会显示允许您轻松地将报表项的大小和位置与其他报表项对齐的指南。
物业检查员
位于报表设计器的Property inspector右侧，由两个组件组成：Properties panel和Data Panel。

属性面板
Properties panel默认情况下打开并允许您修改报表项属性。该Basic模式仅显示基本属性，而Advanced mode显示所有属性。您可以使用报表设计器右下角的下拉菜单在Basic和Advanced模式之间进行切换。在此下拉菜单的左侧，您可以找到为Length units设置默认测量单位的开关。

展开以观看基本和高级模式的实际应用
数据面板
Data panel封装了几个函数。

它允许配置数据绑定
可用于添加、删除和重新排列报表参数的顺序
它显示您可以拖放到报告中的全局值列表
展开以使用数据面板进行观看
表达式编辑器
Expression Editor是很容易组成表达式的对话框。如果单击基于表达式的属性编辑器右边界上的框，则可以使用出现的下拉菜单打开它。左侧expression editor枚举可用的常量、函数和引用。访问表达式文档以获取更多信息。双击一个项目以添加到右侧显示的结果表达式中。

展开以使用表达式编辑器进行观看
过滤器编辑器
该Filters editor界面允许您轻松配置排除要在数据区域或其部分（如表组）中显示的数据的条件。当Filters Editor您单击Filters属性的编辑器时打开，Add...如果尚未添加过滤器则显示文本，Edit...否则显示文本。

ActiveReportsJS：字体配置
字体 101
所有 ActiveReportsJS 组件都在 Web 浏览器环境中运行。

独立的报表设计器应用程序是用Electron构建的，它使用 Chromium 来显示用户界面。

报表设计器和报表查看器组件是在用户机器上的浏览器中运行的 Web 应用程序的一部分。

PDF 和 HTML导出过滤器使用网络浏览器环境来衡量报告内容。

通常，报告由浏览器使用称为字形的形状呈现的文本内容组成。字体资源包含将字符代码映射到表示这些字符的字形的信息。因此，浏览器需要访问字体资源才能按预期显示文本。

ActiveReportsJS 中的所有文本项都有几个字体属性，包括

字体系列：字体 ID、fe Arial、Calibri 或 Times New Roman

字体样式：普通或斜体

字体粗细：Thin、Extra Light、Light、Normal、Medium、SemiBold、Bold、Extra Bold、Heavy

这三个属性的独特组合称为 Font Face。一个字体系列通常由几个字体组成，通常由单独的文件表示。例如，这是CalibryWindows 中字体系列文件夹的屏幕截图：

当 ActiveReportsJS 呈现报告时，它将这些字体属性转换为font-family、font-style和font-weight CSS 样式属性，并依赖浏览器来解析相关的字体资源并提取所需的字形。浏览器有两种访问字体资源的方法——它们可以本地安装在运行浏览器或可下载的系统上。

使用可下载的字体资源，易于维护；所有现代浏览器都支持它，它保证了所有环境中文本内容的一致输出。此外，ActiveReportsJS PDF Export 需要可下载的字体，因为它将字体子集嵌入到 PDF 文档中。

因此，确保跨所有环境的一致报告输出的最佳方法是配置 ActiveReportsJS 组件以访问可下载的字体资源。此页面提供了实现该目标的分步指南。

首先，决定您将在报告中使用哪些字体系列。它可以是标准字体，例如 Arial、Times New Roman 或 Helvetica。它可以是一种或多种网络字体。我们在演示网站上的报告中使用蒙特塞拉特字体。无论如何，请确保您拥有所有字体系列的所有字体文件。ActiveReportsJS 支持以下字体格式：

字体格式

文件扩展名

笔记

WOFF 1.0（Web 开放字体格式）

*.woff

WOFF 2.0（Web 开放字体格式）

*.woff2

IE11 不支持

真型

*.ttf

开放式

*.ttf、*.otf

配置独立设计器应用程序
您可以在以下位置找到独立的报表设计器字体配置。

Windows : %AppData%\ActiveReportsJS Designer\fontsConfig.json

MacOS：~/Library/Application Support/ActiveReportsJS Designer/fontsConfig.json

Linux：~/.config/ActivereportsJS Designer/fontsConfig.json

创建一个名为的文件夹并将Fonts您将用于报告的所有字体的所有文件复制到其中

然后，fontsConfig.json在您最喜欢的 JSON 编辑器中打开该文件。此文件包含报表作者将用于文本内容的字体描述符。在path属性中，指定Fonts目录的父文件夹的绝对路径。

将数组的默认项替换为descriptors所需字体的描述符。每个描述符包括以下属性：

属性名称

描述

笔记

姓名

字体系列名称

例如，“Arial”或“Times New Roman”

风格

字体样式

“正常”或“斜体”

重量

字体字重

建议使用 100 到 900 之间的数值。有关详细信息，请访问CSS 规范。

资源

字体文件的相对路径

例如，“字体/Calibri/calibri.ttf”

例如，要允许Montserrat字体，可以添加以下描述符

fontsConfig.json 中“descriptors”字段值的示例
运行独立的设计器应用程序，在报表正文中添加一个 TextBox，并确保您可以将其 Font Family 属性设置为您在fontsConfig.json文件中枚举的字体之一，并且所有字体都正确显示。

配置基于 ActiveReportsJS 的应用程序
在报表查看器中显示报表、将报表导出为 PDF 或托管报表设计器组件的应用程序应使用您为独立设计器应用程序创建的相同配置。实现这一目标的最简单方法是将上述Fonts文件夹和fontsConfig.json文件复制到应用程序的静态资产文件夹中。此文件夹因不同的前端框架而异。这里有些例子：

为使用create-react-app 创建的React 应用程序使用公共文件夹

Angular 应用程序的资产配置。如果将Fonts文件夹和fontsConfig.json文件复制到assets文件夹中，则修改文件source中字体描述符的属性fontsConfig.json，使其以 开头assets，例如

{
    "name": "Montserrat",
    "weight": "900",
    "style": "italic",
    "source": "assets/Fonts/Montserrat/Montserrat-BlackItalic.ttf"
}  
Vue 应用程序的静态资产处理

最后，应用程序应该使用文件的 URL 调用FontStore对象的registerFonts方法。fontsConfig

此代码应在应用程序开始显示或导出报告之前运行。请注意，该registerFonts方法是异步的，并返回Promise对象。可选地，调用此方法的代码可以等待返回的 Promise 解决，然后再将报告加载到查看器组件中或导出它们。

纯 JavaScript 应用程序示例：

<script src="https://cdn.grapecity.com/activereportsjs/3.0.0/dist/ar-js-core.js"></script>
<script>
  GC.ActiveReports.Core.FontStore.registerFonts(
    "/resources/fontsConfig.json" // replace the URL with the actual one
  )
</script>  
Angular、React 和 Vue 应用程序的示例：

import { Core } from "@grapecity/activereports";
Core.FontStore.registerFonts("/assets/fontConfig.json") // replace the URL with the actual one
您可以在我们的现场演示中找到此类代码的示例。

配置报表设计器组件
要确保报表设计器组件仅显示注册的字体，请将设计器实例的fontSetregistered属性设置为。

ActiveReportsJS：安装
ActiveReportsJS 由跨平台设计器应用程序和几个 JavaScript 库组成。本页概述了这些组件以及每个组件的安装说明。

安装包
我们提供Windows、macOS和Desktop Linux安装包。下载适用于您的操作系统的软件包并解压缩存档。

独立报表设计器应用程序
独立报表设计器是使用Electron构建的跨平台桌面应用程序。您可以使用独立设计器来构建报告。访问报告作者指南了解更多信息。

安装程序位于designer下载的安装包的文件夹中。

核心库
该库包含核心功能并公开了您可以在应用程序代码中使用的几种类型。

假设您计划在使用模块捆绑器（例如webpack ）编译的应用程序中使用 ActiveReportsJS 。在这种情况下，您可以将@grapecity/activereports NPM 包添加到文件中的依赖项列表中package.json。

纯 JavaScript 应用程序可以包含对您可以在下载的安装包文件夹中ar-js-core.js找到的脚本的引用。dist

PDF 导出库
该库包含允许将报告导出为 PDF 格式的代码。有关此主题的更多信息，请访问导出报告页面。

假设您计划在使用模块捆绑器（例如webpack ）编译的应用程序中使用 ActiveReportsJS 。在这种情况下，您可以将包含 PDF 导出功能的@grapecity/activereportspackage.json NPM 包添加到文件中的依赖项列表中。

纯 JavaScript 应用程序可以包含对您可以在下载的安装包文件夹中ar-js-pdf.js找到的脚本的引用。dist

HTML 导出库
该库包含允许将报告导出为 HTML 格式的代码。有关此主题的更多信息，请访问导出报告页面。

假设您计划在使用模块捆绑器（例如webpack ）编译的应用程序中使用 ActiveReportsJS 。在这种情况下，您可以将包含 HTML 导出功能的@grapecity/activereportspackage.json NPM 包添加到文件中的依赖项列表中。

纯 JavaScript 应用程序可以包含对您可以在下载的安装包文件夹中ar-js-html.js找到的脚本的引用。dist

表格数据导出库
此库包含允许将报告导出为表格数据 (CSV) 格式的代码。有关此主题的更多信息，请访问导出报告页面。

假设您计划在使用模块捆绑器（例如webpack ）编译的应用程序中使用 ActiveReportsJS 。在这种情况下，您可以将包含表格数据导出功能的@grapecity/activereportspackage.json NPM 包添加到文件中的依赖项列表中。

纯 JavaScript 应用程序可以包含对您可以在下载的安装包文件夹中ar-js-tabular-data.js找到的脚本的引用。dist

报告查看器库
该库包含JavaScript Report Viewer组件。

假设您计划在使用模块捆绑器（例如webpack ）编译的应用程序中使用 ActiveReportsJS 。在这种情况下，您可以将包含 Report Viewer 组件的@grapecity/activereportspackage.json NPM 包添加到文件中的依赖项列表中。

纯 JavaScript 应用程序可以包含对您可以在下载的安装包文件夹中ar-js-viewer.js找到的脚本的引用。dist

报表设计器库
该库包含JavaScript 报表设计器组件。

假设您计划在使用模块捆绑器（例如webpack ）编译的应用程序中使用 ActiveReportsJS 。在这种情况下，您可以将包含报表设计器组件的@grapecity/activereportspackage.json NPM 包添加到文件中的依赖项列表中。

纯 JavaScript 应用程序可以包含对您可以在下载的安装包文件夹中ar-js-designer.js找到的脚本的引用。dist

Angular NPM 包
这个包包含Angular Report Viewer和Angular Report Designer组件。

要在 Angular 应用程序中使用它们，请将@grapecity/activereports-angular NPM 包添加到应用程序的依赖项列表中。

访问Angular 报表查看器入门和 Angular 报表设计器入门页面以获取基本教程。

反应 NPM 包
这个包包含React Report Viewer和React Report Designer组件。

要在 React 应用程序中使用它们，请将@grapecity/activereports-react NPM 包添加到应用程序的依赖项列表中。

访问React Report Viewer入门和 React Deport Designer 入门页面以获取基本教程。

NPM 包视图
这个包包含Vue Report Viewer和React Report Designer组件。

要在 Vue 应用程序中使用它们，请将@grapecity/activereports-vue N​​PM包添加到应用程序的依赖项列表中。

访问Vue Report Viewer入门和 Vue Deport Designer 入门页面以获取基本教程。

报告查看器本地化库
ActiveReportsJS 包括将报表查看器用户界面翻译成中文和日文。

假设您计划在使用模块捆绑器（例如webpack ）编译的应用程序中使用 ActiveReportsJS 。在这种情况下，您可以将包含这些翻译的@grapecity/activereports-localizationpackage.json NPM 包添加到文件中的依赖项列表中。

纯 JavaScript 应用程序可以包含对您可以在下载的安装包文件夹中ar-js-locales.js找到的脚本的引用。dist\locales

报表设计器本地化库
ActiveReportsJS 包括将报表设计器用户界面翻译成中文和日文。

假设您计划在使用模块捆绑器（例如webpack ）编译的应用程序中使用 ActiveReportsJS 。在这种情况下，您可以将包含这些翻译的@grapecity/activereports-localizationpackage.json NPM 包添加到文件中的依赖项列表中。

纯 JavaScript 应用程序可以包含对您可以在下载的安装包的文件夹中找到ja-locale.js的zh-locale.js脚本的引用。dist\locales\designer

报告查看器 UI 主题
ActiveReportsJS 包含几个用于报表查看器组件的 UI 主题。访问报告查看器主题页面了解更多信息。

假设您计划在使用模块捆绑器（例如webpack ）编译的应用程序中使用 ActiveReportsJS 。在这种情况下，您可以将包含这些主题的@grapecity/activereportspackage.json NPM 包添加到文件中的依赖项列表中。

纯 JavaScript 应用程序可以包含对ar-js-ui.css、ar-js-viewer.css、dark-yellow-ui.css、dark-yellow-viewer.css、green-ui.css、green-viewer.css、light-blue-ui.css和light-blue-viewer.css样式的引用，您可以在styles下载的安装包的文件夹中找到这些样式。

报表设计器 UI 主题
ActiveReportsJS 包含几个用于报表设计器组件的 UI 主题。访问报表设计器主题页面了解更多信息。

假设您计划在使用模块捆绑器（例如webpack ）编译的应用程序中使用 ActiveReportsJS 。在这种情况下，您可以将包含这些主题的@grapecity/activereportspackage.json NPM 包添加到文件中的依赖项列表中。

纯 JavaScript 应用程序可以包含对ar-js-ui.css、ar-js-designer.css、dark-yellow-ui.css、dark-yellow-designer.css、green-ui.css、green-designer.css、light-blue-ui.css和light-blue-designer.css样式的引用，您可以在styles下载的安装包的文件夹中找到这些样式。