本文将指导您如何在 .NET 5 Web 应用程序的ASP.NET Core 中添加 HTML5 报告查看器 。
先决条件
报告查看器需要对正在运行的报告 Web 服务的引用。报告查看器可以使用由以下任何报告 Web 服务实现生成和提供的报告：
在另一个应用程序中运行的服务。
在 Telerik Report Server 实例中运行的服务。
在同一应用程序中本地托管的服务
如果您需要在本地托管它，请遵循如何在 .NET 5 中的 ASP.NET Core 中托管报表服务一文。（也可以直接看我上一篇文章）
添加 HTML5 报告查看器
-
本教程使用Barcodes Report.trdp报告定义文件，该文件必须位于项目内的Reports文件夹中。
-
确保Startup.cs的Configure方法中的应用程序配置 可以提供静态文件：
app.UseStaticFiles();
3.通过右键单击wwwroot和Add > New Item... > HTML Page为 HTML5 报告查看器添加 HTML 页面。将文件命名为index.html并添加 HTML5 报告查看器的初始化。有关详细说明，请查看 HTML5 Report Viewer Manual Setup帮助文章。下面的示例中列出了对 jQuery 和 Telerik Kendo UI CSS 和 JS 文件的必需引用。默认情况下，必要的报表查看器脚本和样式由 REST 服务提供。
完整的报告查看器页面应如下所示：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Telerik HTML5 Report Viewer Demo in ASP.NET Core in .NET 5</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://kendo.cdn.telerik.com/2020.3.1118/styles/kendo.common.min.css" rel="stylesheet" /> <link href="https://kendo.cdn.telerik.com/2020.3.1118/styles/kendo.blueopal.min.css" rel="stylesheet" /> <script src="/api/reports/resources/js/telerikReportViewer"></script> <style> #reportViewer1 { position: absolute; left: 5px; right: 5px; top: 50px; bottom: 5px; overflow: hidden; font-family: Verdana, Arial; } </style> </head> <body> <div id="reportViewer1"> loading... </div> <script> $(document).ready(function () { $("#reportViewer1") .telerik_ReportViewer({ serviceUrl: "api/reports/", reportSource: { report: "Barcodes Report.trdp", parameters: {} }, viewMode: telerikReportViewer.ViewModes.INTERACTIVE, scaleMode: telerikReportViewer.ScaleModes.SPECIFIC, scale: 1.0, enableAccessibility: false, sendEmail: { enabled: true } }); }); </script> </body> </html>
4.将launchSettings.json launchUrl 设置为新的 HTML 页面。
5.最后，运行项目查看报告。
演示项目
完整示例可以在 Telerik Reporting 的安装文件夹中找到：C:Program Files (x86)ProgressTelerik Reporting {Version}ExamplesCSharp.NET 5AspNet5Demo
来自：https://docs.telerik.com/reporting/manual-setup-of-html5-report-viewer-in-aspnetcore-net5