Telerik Reporting：如何在 .NET 5 应用程序的 ASP.NET Core 中使用 HTML5 报表查看器

本文将指导您如何在 .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