當(dāng)前位置:首頁 > IT技術(shù) > Web編程 > 正文

Telerik Reporting:如何在 .NET 5 應(yīng)用程序的 ASP.NET Core 中使用 HTML5 報表查看器
2021-09-24 14:44:24

本文將指導(dǎo)您如何在 .NET 5 Web 應(yīng)用程序的ASP.NET Core 中添加 HTML5 報告查看器 。

先決條件
報告查看器需要對正在運行的報告 Web 服務(wù)的引用。報告查看器可以使用由以下任何報告 Web 服務(wù)實現(xiàn)生成和提供的報告:

在另一個應(yīng)用程序中運行的服務(wù)。

在 Telerik Report Server 實例中運行的服務(wù)。

在同一應(yīng)用程序中本地托管的服務(wù)

如果您需要在本地托管它,請遵循如何在 .NET 5 中的 ASP.NET Core 中托管報表服務(wù)一文。(也可以直接看我上一篇文章)

添加 HTML5 報告查看器

  1. 本教程使用Barcodes Report.trdp報告定義文件,該文件必須位于項目內(nèi)的Reports文件夾中。

  2. 確保Startup.csConfigure方法中的應(yīng)用程序配置?可以提供靜態(tài)文件:

    app.UseStaticFiles();

    3.通過右鍵單擊wwwroot和Add > New Item... > HTML Page為 HTML5 報告查看器添加 HTML 頁面。將文件命名為index.html并添加 HTML5 報告查看器的初始化。有關(guān)詳細說明,請查看 HTML5 Report Viewer?Manual Setup幫助文章。下面的示例中列出了對 jQuery 和 Telerik Kendo UI CSS 和 JS 文件的必需引用。默認情況下,必要的報表查看器腳本和樣式由 REST 服務(wù)提供。

完整的報告查看器頁面應(yīng)如下所示:

<!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 設(shè)置為新的 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

本文摘自 :https://www.cnblogs.com/

開通會員,享受整站包年服務(wù)立即開通 >