企业利用资产负债表来展现其在特定时间点的财务状况。通过汇总资产、负债和所有者权益这些报告有助于债权人、投资者和利益相关者评估公司的财务健康状况和稳定性。对于构建业务应用程序的开发者而言生成和交付资产负债表等报表是一项常见需求。用户希望无论使用何种设备或身处何地都能直接在他们使用的应用程序中设计、查看报表并与之交互。ActiveReportsJS 的 Angular 报表设计器和查看器让这一切变得轻松简单使您能够完全在浏览器中构建、自定义和显示报表。在本教程中您将学习如何使用 Angular 报表设计器创建资产负债表报表并使用 Angular 报表查看器显示它。将 Angular 报表设计器添加到应用程序中首先我们需要将 ActiveReportsJS Angular 包添加到我们的应用程序中。在应用程序文件夹中运行以下命令span stylecolor:#000000span stylebackground-color:#ffffffspan stylebackground-color:#f5f2f0span stylecolor:blackcode classlanguage-command-linenpm i grapecity/activereports-angular/code/span/span/span/span安装完成后您就可以在应用程序中使用 ActiveReportsJS Angular 库了。接下来我们需要确保正确的模块已加载到应用程序中并且所有必需的文件都已正确引用。在app.module.ts文件中 导入以下模块span stylecolor:#000000span stylebackground-color:#ffffffspan stylebackground-color:#f5f2f0span stylecolor:blackcode classlanguage-javascriptspan stylecolor:#0077aaimport/span span stylecolor:#999999{/span ActiveReportsModule span stylecolor:#999999}/span span stylecolor:#0077aafrom/span span stylecolor:#669900grapecity/activereports-angular/spanspan stylecolor:#999999;/span/code/span/span/span/span这样可以确保我们可以在标记中访问 Angular 报表设计器。另外别忘了将其添加到导入列表中span stylecolor:#000000span stylebackground-color:#ffffffspan stylebackground-color:#f5f2f0span stylecolor:blackcode classlanguage-javascriptimportsspan stylecolor:#9a6e3a:/span span stylecolor:#999999[/span BrowserModulespan stylecolor:#999999,/span ActiveReportsModule span stylecolor:#999999]/span/code/span/span/span/span现在我们可以在应用程序中引用报表设计器但是在实现设计器之前我们需要包含所需的 CSS 文件。对于 ActiveReportsJS我们需要在应用程序的styles.css文件中导入这些文件。这些文件必须在此处加载否则样式将不会应用于控件。在该文件中包含以下导入语句span stylecolor:#000000span stylebackground-color:#ffffffspan stylebackground-color:#f5f2f0span stylecolor:blackcode classlanguage-cssspan stylecolor:#0077aaimport span stylebackground-color:rgba(255, 255, 255, 0.5)span stylecolor:#9a6e3agrapecity/activereports/styles/ar-js-ui.css/span/spanspan stylecolor:#999999;/span/span span stylecolor:#0077aaimport span stylebackground-color:rgba(255, 255, 255, 0.5)span stylecolor:#9a6e3agrapecity/activereports/styles/ar-js-designer.css/span/spanspan stylecolor:#999999;/span/span/code/span/span/span/span现在所有必需的文件都已导入我们可以开始在标记语言中使用报表设计器了。要引用报表设计器请在app.component.html文件中添加以下代码span stylecolor:#000000span stylebackground-color:#ffffffspan stylebackground-color:#f5f2f0span stylecolor:blackcode classlanguage-markupspan stylecolor:#990055span stylecolor:#990055span stylecolor:#999999/spandiv/span span stylecolor:#669900id/spanspan stylecolor:#0077aaspan stylecolor:#999999/spanspan stylecolor:#999999/spandesigner-hostspan stylecolor:#999999/span/spanspan stylecolor:#999999/span/span span stylecolor:#990055span stylecolor:#990055span stylecolor:#999999/spangc-activereports-designer/spanspan stylecolor:#999999/span/spanspan stylecolor:#990055span stylecolor:#990055span stylecolor:#999999//spangc-activereports-designer/spanspan stylecolor:#999999/span/span span stylecolor:#990055span stylecolor:#990055span stylecolor:#999999//spandiv/spanspan stylecolor:#999999/span/span/code/span/span/span/span这就是在应用程序中集成 Angular 报表设计器的全部步骤。请注意我们还在设计器外包裹了一个 div 元素。这样做是为了方便我们控制设计器的大小。默认情况下设计器会填充它所在的任何元素所以我们这样做是为了控制其大小。在app.component.css文件中 我们使用以下代码设置大小span stylecolor:#000000span stylebackground-color:#ffffffspan stylebackground-color:#f5f2f0span stylecolor:blackcode classlanguage-cssspan stylecolor:#669900#designer-host/span span stylecolor:#999999{/span span stylecolor:#990055width/spanspan stylecolor:#999999:/span 100% span stylecolor:#990055height/spanspan stylecolor:#999999:/span 100% span stylecolor:#999999}/span/code/span/span/span/span现在当我们运行该应用程序时应该会看到以下内容完成上述步骤后我们可以添加保存报告的功能我们将在下一节中介绍。保存报告详情在应用程序中添加报表设计器后接下来我们需要添加用户保存报表的功能。幸运的是ActiveReportsJS 报表设计器内置了几个事件可以帮助我们实现这一目标onSave和onSaveAs事件。在app.component.html文件中修改报表设计器的标记使其与以下内容匹配span stylecolor:#000000span stylebackground-color:#ffffffspan stylebackground-color:#f5f2f0span stylecolor:blackcode classlanguage-markupspan stylecolor:#990055span stylecolor:#990055span stylecolor:#999999/spangc-activereports-designer/span span stylecolor:#669900[onSave]/spanspan stylecolor:#0077aaspan stylecolor:#999999/spanspan stylecolor:#999999/spanonSaveReportspan stylecolor:#999999/span/span span stylecolor:#669900[onSaveAs]/spanspan stylecolor:#0077aaspan stylecolor:#999999/spanspan stylecolor:#999999/spanonSaveAsReportspan stylecolor:#999999/span/spanspan stylecolor:#999999/span/spanspan stylecolor:#990055span stylecolor:#990055span stylecolor:#999999//spangc-activereports-designer/spanspan stylecolor:#999999/span/span/code/span/span/span/span这将把onSave和onSaveAs这两个方法绑定到这两个事件上。现在在app.component.ts文件中我们将实现这些方法以便在事件触发时可以使用它们span stylecolor:#000000span stylebackground-color:#ffffffspan stylebackground-color:#f5f2f0span stylecolor:blackcode classlanguage-javascriptcounter span stylecolor:#9a6e3a/span span stylecolor:#9900550/spanspan stylecolor:#999999;/span reportStorage span stylecolor:#9a6e3a/span span stylecolor:#0077aanew/span span stylecolor:#dd4a68Map/spanspan stylecolor:#999999(/spanspan stylecolor:#999999)/spanspan stylecolor:#999999;/span span stylecolor:#dd4a68onSaveReport/span span stylecolor:#9a6e3a/span span stylecolor:#999999(/spaninfospan stylecolor:#9a6e3a:/span anyspan stylecolor:#999999)/span span stylecolor:#9a6e3a/span span stylecolor:#999999{/span span stylecolor:#0077aaconst/span reportId span stylecolor:#9a6e3a/span infospan stylecolor:#999999./spanid span stylecolor:#9a6e3a||/span span stylecolor:#669900/spanspan stylecolor:#669900NewReport/spanspan stylecolor:#999999${/spanspan stylecolor:#9a6e3a/spanspan stylecolor:#0077aathis/spanspan stylecolor:#999999./spancounterspan stylecolor:#999999}/spanspan stylecolor:#669900/spanspan stylecolor:#999999;/span span stylecolor:#0077aathis/spanspan stylecolor:#999999./spanreportStoragespan stylecolor:#999999./spanspan stylecolor:#dd4a68set/spanspan stylecolor:#999999(/spanreportIdspan stylecolor:#999999,/span infospan stylecolor:#999999./spandefinitionspan stylecolor:#999999)/spanspan stylecolor:#999999;/span span stylecolor:#0077aareturn/span Promisespan stylecolor:#999999./spanspan stylecolor:#dd4a68resolve/spanspan stylecolor:#999999(/spanspan stylecolor:#999999{/spandisplayNamespan stylecolor:#9a6e3a:/span reportIdspan stylecolor:#999999}/spanspan stylecolor:#999999)/spanspan stylecolor:#999999;/span span stylecolor:#999999}/span span stylecolor:#dd4a68onSaveAsReport/span span stylecolor:#9a6e3a/span span stylecolor:#999999(/spaninfospan stylecolor:#9a6e3a:/span anyspan stylecolor:#999999)/span span stylecolor:#9a6e3a/span span stylecolor:#999999{/span span stylecolor:#0077aaconst/span reportId span stylecolor:#9a6e3a/span span stylecolor:#669900/spanspan stylecolor:#669900NewReport/spanspan stylecolor:#999999${/spanspan stylecolor:#9a6e3a/spanspan stylecolor:#0077aathis/spanspan stylecolor:#999999./spancounterspan stylecolor:#999999}/spanspan stylecolor:#669900/spanspan stylecolor:#999999;/span span stylecolor:#0077aathis/spanspan stylecolor:#999999./spanreportStoragespan stylecolor:#999999./spanspan stylecolor:#dd4a68set/spanspan stylecolor:#999999(/spanreportIdspan stylecolor:#999999,/span infospan stylecolor:#999999./spandefinitionspan stylecolor:#999999)/spanspan stylecolor:#999999;/span span stylecolor:#0077aareturn/span Promisespan stylecolor:#999999./spanspan stylecolor:#dd4a68resolve/spanspan stylecolor:#999999(/spanspan stylecolor:#999999{/spanidspan stylecolor:#9a6e3a:/span reportIdspan stylecolor:#999999,/span displayNamespan stylecolor:#9a6e3a:/span reportIdspan stylecolor:#999999}/spanspan stylecolor:#999999)/spanspan stylecolor:#999999;/span span stylecolor:#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 都能提供您所需的组件助您更快地交付专业的报表体验