介绍

这个故事讲述了如何在Angular中展示PDF格式的报告收据。解决方案包括利用ASP.NET Web API来生成Crystal Report的PDF版本，并将PDF文件以流的形式传输到Angular前端，以便在浏览器中直接查看。Angular的PDF查看器具备多种高级功能，如分页、缩放、打印以及保存到本地等。如图1所示，您可以看到查看PDF报告的示例界面。和以往一样，文章中包含了完整的源代码。

图 1 — Crystal Report 以 PDF 格式呈现，用于在 Angular 中显示

应用程序架构概述

设想您和团队正在致力于将几个老旧的ASP.NET 4 Framework Web应用程序进行现代化升级。目标技术栈是构建单页面应用（SPA），前端使用Angular，后端则由ASP.NET Web API提供支持。这些旧应用程序包含了数百份Crystal报表。您的任务是将这些报表迁移到新的平台上。然而，您发现Crystal Report无法在ASP.NET CORE的新环境中运行，这确实是一个意外。

为了规避昂贵的重写成本，您的团队决定利用仍然得到支持的ASP.NET Framework 4.7 WebAPI 2，将报表服务提供给Angular前端。如图2所示，该架构描述了Angular应用通过REST API访问Crystal Report的方式。Crystal Report以PDF格式呈现，并通过流式传输的方式发送到Angular，以便在Web浏览器中展示。

图 2—Angular 应用程序和 Web API 的架构

Github 存储库

本教程的完整源代码可在 GitHub 上找到。前端和后端代码组织在单独的项目中。这使得维护和部署到微服务架构中更加容易。

workcontrolgit/CrystalReportWebAPI 是用 ASP.NET Framework 4.7/Web API 2 编写的后端 REST API。它以 PDF 格式呈现 Crystal Report，并可通过 REST API HTTP Get 方法访问。自定义操作过滤器用于缓存报告以提高性能。
workcontrolgit/AngularCrytalReportUI 是前端 Angular v12 应用。它有一个仪表板，链接到由 Crystal Report 生成的四份 PDF 格式的财务报告。

前提条件

建议使用以下工具/技能。

Visual Code ——Angular 的免费代码编辑器
Visual Studio 2019 Community — C# 的免费代码编辑器

教程内容

本教程重点介绍以下编程技术

在后端 REST API 中将水晶报表渲染为 PDF 格式
将 PDF 数据文件传输到 Angular 前端以在浏览器中显示

本教程内容由以下几个部分组成：

第 1 部分： Git-Clone 后端 Crystal Report REST API 和代码演练将 Asp.Net WebAPI 项目克隆到本地并检查与将 Crystal Report 导出为 PDF 进行流式传输相关的代码。

第 2 部分： Git-Clone 前端 Angular 应用程序和代码演练克隆 Angular 应用程序并演练 PDF 查看库 ngx-extended-pdf-viewer 的使用代码。

第 3 部分： 测试驱动应用程序在本地主机上运行 Angular 和 Web API 并试用 Crystal Report。

第 1 部分： Git-Clone 后端 Crystal Report REST API 和代码演练

任务 1.1 – Git-Clone 后端 Crystal Report REST API

使用 Visual Studio 2019，我们将从 Github 克隆 Web API 源代码项目。按照以下步骤下载源代码（参见图 3 的视觉辅助）：

启动 Visual Studio 2019 并选择选项“克隆存储库”
将 repo https://github.com/workcontrolgit/CrystalReportWebAPI 克隆到 C:\apps\devkit\ApiResources\CrystalReportWebAPI

图 3—从 Github 克隆 Web API 源代码

在解决方案资源管理器中，您应该看到 CrystalReportWebAPI 项目。单击 CrystalReportWebAPI 项目并注意 SSL URL。该 URL 应设置为 https://localhost:44369 。这是 Angular 应用将调用以获取报告的 REST API 服务器的地址。请参阅图 4 以获取解决方案资源管理器中项目的屏幕截图。

图 4—Visual Studio 解决方案资源管理器中的 CrystalReportWebAPI 项目

任务 1.2 — Crystal Report REST API 的代码演练

在本节中，我们将查看三个文件中的源代码，这些文件负责将 Crystal Report 渲染为 PDF 以供流式传输。这些文件超链接到存储库，以便您知道项目中的文件位置。

ReportsController.cs — 通过 HTTP Get 公开 Crystal Report 的 Web API 控制器。请参阅图 5 中的源代码列表。
CrystalReport.cs — 将 Crystal Report 导出为 PDF 并将响应标头设置为 application/pdf 的源代码。请参阅图 6 中的源代码列表。
ClientCacheWithEtagAttribute.cs — 使用操作属性缓存 Crystal Report 的源代码。请参阅图 7 中的源代码列表。

图 5 — ReportController.cs 源代码列表图 6 — CrystalReport.cs 源代码清单图 7 — ClientCacheWithEtagAttribute.cs 源代码列表

第 2 部分： Git-Clone 前端 Angular 应用程序和代码演练

任务 2.1 — Git-Clone 前端 Angular 应用程序

在本部分教程中，我们将从 GitHub git-clone Angular 应用程序并运行 npm install 下载节点模块。在进行克隆之前，请确保在桌面上创建一个文件夹 C:\apps\devkit\Clients， 用于存储 Angular 源代码。

启动可视化代码
转到菜单“View”>“Command Pallet”（或 Ctrl-Shift-P）。请参阅图 7 以获得视觉辅助。
输入“Clone”并选择 Git: Clone。参见图 x 的视觉辅助
当提示 提供存储库 URL 或选择存储库源时，输入 https://github.com/workcontrolgit/AngularCrystalReportUI。 请参阅图 8 中的视觉辅助。
选择文件夹 C:\apps\devkit\Clients 保存源代码。
转到菜单“视图”>“终端”（或 Ctrl + ‘），然后在命令行中输入 npm i ，然后按 Enter。恢复 NPM 包可能需要几分钟，具体取决于您的网络带宽。请参阅图 9 了解视觉辅助。

图 7 — 带有克隆 repo 选项的 Visual Code

图 8 — Visual Code 提示保存源文件位置

图 9 — 通过命令 npm i （安装）恢复 NPM 包

任务 2.2 — 前端 Angular 应用的代码演练

以下是支持在 Angular 应用程序中以 PDF 形式呈现的 Crystal Report 显示的主要源代码文件

environment.ts — 具有 webapi 服务器的设置。参见图 10。
report.service.ts — 具有使用 Angular HTTP 客户端调用 Web API 的方法。参见图 11。
saving.module.ts — 包含客户 PDF 查看器的设置。参见图 12。
saving.component.html — 包含显示 pdf 的代码。参见图 13。
saving.component.ts — 包含调用报告服务器 WebAPI 的代码。参见图 14。

图 10— Environment.ts 文件中的 reportServer URL 设置图 11 — report.service.ts 文件中的源代码列表图 12 — saving.module.ts 文件中的源代码列表图 13 — saving.component.html 文件中的源代码列表图 14 — saving.component.ts 文件中的源代码列表