ActiveReportsJS如何在Angular报表设计器中构建资产负债表
企业利用资产负债表来展现其在特定时间点的财务状况。通过汇总资产、负债和所有者权益，这些报告有助于债权人、投资者和利益相关者评估公司的财务健康状况和稳定性。
对于构建业务应用程序的开发者而言，生成和交付资产负债表等报表是一项常见需求。用户希望无论使用何种设备或身处何地，都能直接在他们使用的应用程序中设计、查看报表并与之交互。ActiveReportsJS 的 Angular 报表设计器和查看器让这一切变得轻松简单，使您能够完全在浏览器中构建、自定义和显示报表。在本教程中，您将学习如何使用 Angular 报表设计器创建资产负债表报表，并使用 Angular 报表查看器显示它。
将 Angular 报表设计器添加到应用程序中
首先，我们需要将 ActiveReportsJS Angular 包添加到我们的应用程序中。在应用程序文件夹中，运行以下命令：
<span style="color:#000000"><span style="background-color:#ffffff"><span style="background-color:#f5f2f0"><span style="color:black"><code class="language-command-line">npm i @grapecity/activereports-angular</code></span></span></span></span>安装完成后，您就可以在应用程序中使用 ActiveReportsJS Angular 库了。接下来，我们需要确保正确的模块已加载到应用程序中，并且所有必需的文件都已正确引用。
在app.module.ts文件中 ，导入以下模块：
<span style="color:#000000"><span style="background-color:#ffffff"><span style="background-color:#f5f2f0"><span style="color:black"><code class="language-javascript"><span style="color:#0077aa">import</span> <span style="color:#999999">{</span> ActiveReportsModule <span style="color:#999999">}</span> <span style="color:#0077aa">from</span> <span style="color:#669900">'@grapecity/activereports-angular'</span><span style="color:#999999">;</span></code></span></span></span></span>这样可以确保我们可以在标记中访问 Angular 报表设计器。另外，别忘了将其添加到导入列表中：
<span style="color:#000000"><span style="background-color:#ffffff"><span style="background-color:#f5f2f0"><span style="color:black"><code class="language-javascript">imports<span style="color:#9a6e3a">:</span> <span style="color:#999999">[</span> BrowserModule<span style="color:#999999">,</span> ActiveReportsModule <span style="color:#999999">]</span></code></span></span></span></span>现在，我们可以在应用程序中引用报表设计器；但是，在实现设计器之前，我们需要包含所需的 CSS 文件。
对于 ActiveReportsJS，我们需要在应用程序的styles.css文件中导入这些文件。这些文件必须在此处加载，否则样式将不会应用于控件。在该文件中，包含以下导入语句：
<span style="color:#000000"><span style="background-color:#ffffff"><span style="background-color:#f5f2f0"><span style="color:black"><code class="language-css"><span style="color:#0077aa">@import <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">"@grapecity/activereports/styles/ar-js-ui.css"</span></span><span style="color:#999999">;</span></span> <span style="color:#0077aa">@import <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">"@grapecity/activereports/styles/ar-js-designer.css"</span></span><span style="color:#999999">;</span></span></code></span></span></span></span>现在所有必需的文件都已导入，我们可以开始在标记语言中使用报表设计器了。要引用报表设计器，请在app.component.html文件中添加以下代码：
<span style="color:#000000"><span style="background-color:#ffffff"><span style="background-color:#f5f2f0"><span style="color:black"><code class="language-markup"><span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>div</span> <span style="color:#669900">id</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>designer-host<span style="color:#999999">"</span></span><span style="color:#999999">></span></span> <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>gc-activereports-designer</span><span style="color:#999999">></span></span><span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>gc-activereports-designer</span><span style="color:#999999">></span></span> <span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>div</span><span style="color:#999999">></span></span></code></span></span></span></span>这就是在应用程序中集成 Angular 报表设计器的全部步骤。请注意，我们还在设计器外包裹了一个 div 元素。这样做是为了方便我们控制设计器的大小。默认情况下，设计器会填充它所在的任何元素，所以我们这样做是为了控制其大小。
在app.component.css文件中 ，我们使用以下代码设置大小：
<span style="color:#000000"><span style="background-color:#ffffff"><span style="background-color:#f5f2f0"><span style="color:black"><code class="language-css"><span style="color:#669900">#designer-host</span> <span style="color:#999999">{</span> <span style="color:#990055">width</span><span style="color:#999999">:</span> 100% <span style="color:#990055">height</span><span style="color:#999999">:</span> 100% <span style="color:#999999">}</span></code></span></span></span></span>现在，当我们运行该应用程序时，应该会看到以下内容：
完成上述步骤后，我们可以添加保存报告的功能，我们将在下一节中介绍。
保存报告详情
在应用程序中添加报表设计器后，接下来我们需要添加用户保存报表的功能。幸运的是，ActiveReportsJS 报表设计器内置了几个事件，可以帮助我们实现这一目标：onSave和onSaveAs事件。
在app.component.html文件中，修改报表设计器的标记，使其与以下内容匹配：
<span style="color:#000000"><span style="background-color:#ffffff"><span style="background-color:#f5f2f0"><span style="color:black"><code class="language-markup"><span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>gc-activereports-designer</span> <span style="color:#669900">[onSave]</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>onSaveReport<span style="color:#999999">"</span></span> <span style="color:#669900">[onSaveAs]</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>onSaveAsReport<span style="color:#999999">"</span></span><span style="color:#999999">></span></span><span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>gc-activereports-designer</span><span style="color:#999999">></span></span></code></span></span></span></span>这将把onSave和onSaveAs这两个方法绑定到这两个事件上。现在，在app.component.ts文件中，我们将实现这些方法，以便在事件触发时可以使用它们：
<span style="color:#000000"><span style="background-color:#ffffff"><span style="background-color:#f5f2f0"><span style="color:black"><code class="language-javascript">counter <span style="color:#9a6e3a">=</span> <span style="color:#990055">0</span><span style="color:#999999">;</span> reportStorage <span style="color:#9a6e3a">=</span> <span style="color:#0077aa">new</span> <span style="color:#dd4a68">Map</span><span style="color:#999999">(</span><span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#dd4a68">onSaveReport</span> <span style="color:#9a6e3a">=</span> <span style="color:#999999">(</span>info<span style="color:#9a6e3a">:</span> any<span style="color:#999999">)</span> <span style="color:#9a6e3a">=></span> <span style="color:#999999">{</span> <span style="color:#0077aa">const</span> reportId <span style="color:#9a6e3a">=</span> info<span style="color:#999999">.</span>id <span style="color:#9a6e3a">||</span> <span style="color:#669900">`</span><span style="color:#669900">NewReport</span><span style="color:#999999">${</span><span style="color:#9a6e3a">++</span><span style="color:#0077aa">this</span><span style="color:#999999">.</span>counter<span style="color:#999999">}</span><span style="color:#669900">`</span><span style="color:#999999">;</span> <span style="color:#0077aa">this</span><span style="color:#999999">.</span>reportStorage<span style="color:#999999">.</span><span style="color:#dd4a68">set</span><span style="color:#999999">(</span>reportId<span style="color:#999999">,</span> info<span style="color:#999999">.</span>definition<span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#0077aa">return</span> Promise<span style="color:#999999">.</span><span style="color:#dd4a68">resolve</span><span style="color:#999999">(</span><span style="color:#999999">{</span>displayName<span style="color:#9a6e3a">:</span> reportId<span style="color:#999999">}</span><span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#999999">}</span> <span style="color:#dd4a68">onSaveAsReport</span> <span style="color:#9a6e3a">=</span> <span style="color:#999999">(</span>info<span style="color:#9a6e3a">:</span> any<span style="color:#999999">)</span> <span style="color:#9a6e3a">=></span> <span style="color:#999999">{</span> <span style="color:#0077aa">const</span> reportId <span style="color:#9a6e3a">=</span> <span style="color:#669900">`</span><span style="color:#669900">NewReport</span><span style="color:#999999">${</span><span style="color:#9a6e3a">++</span><span style="color:#0077aa">this</span><span style="color:#999999">.</span>counter<span style="color:#999999">}</span><span style="color:#669900">`</span><span style="color:#999999">;</span> <span style="color:#0077aa">this</span><span style="color:#999999">.</span>reportStorage<span style="color:#999999">.</span><span style="color:#dd4a68">set</span><span style="color:#999999">(</span>reportId<span style="color:#999999">,</span> info<span style="color:#999999">.</span>definition<span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#0077aa">return</span> Promise<span style="color:#999999">.</span><span style="color:#dd4a68">resolve</span><span style="color:#999999">(</span><span style="color:#999999">{</span>id<span style="color:#9a6e3a">:</span> reportId<span style="color:#999999">,</span> displayName<span style="color:#9a6e3a">:</span> reportId<span style="color:#999999">}</span><span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#999999">}</span></code></span></span></span></span>首先，我们创建一个Map()对象来存储报表使用的键值对。然后，将报表信息作为参数传递，并将报表数据映射到该 Map 对象，最后返回一个包含报表信息的 Promise 对象。
请注意，这里使用的是内存中的报表存储。在实际部署时，您可能需要将报表定义（一个 JSON 对象）传递给后端进行存储。
向报表添加数据源和数据集
设计器已实现，保存功能也已添加完毕，现在可以开始构建资产负债表了。不过，在开始向报表中添加控件之前，我们需要获取一些数据以供显示。
要将数据绑定到报表，我们首先需要添加数据源。数据源是我们用来检索数据的地方。
要添加数据源，请打开数据面板，然后单击数据源面板中的“添加”按钮：
这将打开数据源向导：
ActiveReportsJS 支持两种数据绑定方法（远程和嵌入式）和两种数据类型（JSON 和 CSV）。在本演示中，我们将使用嵌入式 JSON 数据作为数据源。
现在，我们已经有了可以从中提取数据的数据源。但是，我们需要创建一个数据集来存储这些数据，以便在报告中引用它们。添加数据源后，我们需要单击数据源旁边的“添加”按钮，以打开数据集创建向导：
在这里我们可以设置要提取到报告中的实际数据。请注意，如果您使用的是远程数据，则可以向后端传递更多参数等选项。由于我们使用的是嵌入式数据，因此此处的选项较少。
为了正确加载数据，我们需要设置JSON Path字段。它起到类似过滤器的作用，允许您在构建数据集时控制要检索的数据。在本例中，我们需要所有可用数据，因此我们使用字符串$.*，它指示报表设计器提取所有可用数据。
在保存数据源之前，我们需要确保能够验证数据。这只是为了检查在生成报表时，数据集是否能够真正从数据源中提取数据。如果一切正常，您应该会看到“数据库字段”数组已填充了值：
完成上述步骤后，我们就有了可以连接到控件的数据。在下一节中，我们将构建资产负债表，并向所使用的各个组成部分添加数据。
设计资产负债表并将数据与控制措施绑定
数据准备就绪后，我们现在可以在报表设计器中构建资产负债表。首先，我们要设置一个页眉来标识该报表。在设计器顶部，单击“节”选项卡，然后选择“添加页眉”。这将在该报表的顶部添加一个页眉节。
接下来，我们将把一个文本框和一个图像控件拖到页面页眉中。文本框的文本内容设置为“资产负债表”，图像控件中将嵌入一张图片，用于显示报表内容。
要嵌入图像，请选择图像控件，然后在属性面板的“操作”部分中，打开图像下拉列表，选择“嵌入”选项，然后单击“加载”按钮打开文件资源管理器并选择要上传的图像。
添加这些控件（并稍作样式设置）后，页面标题应该看起来像这样：
现在，我们将添加一些控件来显示公司的总资产和总负债。从控件工具箱中拖放一个表格控件到报表上。接下来，我们将删除页眉和页脚行。方法是右键单击要删除的行中的单元格，将鼠标悬停在“行”选项上，然后选择“删除行”。我们还要删除一列，因此请按照上述步骤操作，只是选择“列”和“删除列”。
然后，复制并粘贴此表，以便我们有两张表格。对于第一张表格中的单元格，我们将把它们的值设置为“总资产”和“{TotalAssets}”，以及“总负债”和“{TotalLiabilities}”。
最后，选择每个表格中的第二个单元格，在“属性”面板中找到“格式”属性，并将其设置为“货币”；这将确保我们的货币值以货币格式显示。
经过一些样式调整后，我们的报告现在显示如下：
完成上述步骤后，就可以开始添加其他表格来展示公司的各项资产和负债了。为此，我们将创建六个表格，分别涵盖以下几个方面：
- 流动资产
- 流动负债
- 固定资产
- 长期负债
- 其他资产
- 股东权益
为了方便起见，我们将创建一个表格模板，然后复制该模板并填写其余数据。
将另一个表格控件拖放到报表上，这次保留页眉和页脚行，但删除其中一列，使其只剩下两列。
接下来，我们将选中标题行中的两个单元格，并使用上下文菜单将它们合并。最后，我们还会添加一些样式，使标题行和页脚行更加醒目。我们将标题行的背景色设置为灰色，然后将页脚行的文本颜色设置为灰色。最后，在第二列中，我们将再次把格式设置为“货币”。
完成后，表格应该看起来像这样：
现在，我们将为每个要实现的数据表复制此表。以这份资产负债表为例，我们将有六个表：流动资产表、流动负债表、固定资产表、长期负债表、其他资产表和股东权益表。请参阅下表，了解每个表的具体设置：
| 流动资产 | |
| 银行存款 | 银行存款 |
| 存货 | {存货} |
| 预付费用 | 预付费用 |
| 其他 | {其他当前资产} |
| 全部的 | {总当前资产} |
| 流动负债 | |
| 应付账款 | 应付账款 |
| 应缴税款 | 应缴税款 |
| 应付票据（12个月） | 应付票据 |
| 流动部分长期债务 | {当前部分} |
| 其他流动负债 | 其他流动负债 |
| 全部的 | {Sum(总流动负债)} |
| 固定资产 | |
| 机械设备 | 机械设备 |
| 家具及固定装置 | 家具及固定装置 |
| 租赁物业改良 | {租赁物业改良} |
| 房地产\建筑物 | {房地产和建筑物} |
| 其他 | {其他固定资产} |
| 全部的 | {总固定资产总和} |
| 长期负债 | |
| 应付银行贷款 | 银行贷款应付账款 |
| 短期部分 | {短期部分} |
| 应付股东票据 | {应付股东票据} |
| 其他长期债务 | 其他长期债务 |
| 全部的 | {总长期负债} |
| 其他资产 | |
| 员工应收款项 | 员工应收账款 |
| 应收客户款项 | {客户应收账款} |
| 无形资产 | 无形资产 |
| 全部的 | {总和其他资产之和} |
| 股东权益 | |
| 普通股 | 普通股 |
| 额外实缴资本 | {额外付费} |
| 留存收益 | {留存收益} |
| 全部的 | {股东权益总额之和} |
表格设置完毕，报告就完成了！预览报告后，它应该看起来像这样：
结论
构建财务报表无需复杂的自定义 UI 或耗费大量开发精力。借助 ActiveReportsJS 及其 Angular 报表设计器和查看器，您可以创建精美且交互式的资产负债表，并将其直接集成到您的 Web 应用程序中，同时让最终用户能够灵活地在浏览器中设计和查看报表。无论您是构建内部业务工具、财务仪表板还是企业报表解决方案，ActiveReportsJS 都能提供您所需的组件，助您更快地交付专业的报表体验