APP
本文將指導您如何在 .NET 5 Web 應用程序的ASP.NET Core 中添加 HTML5 報告查看器 。
先決條件
報告查看器需要對正在運行的報告 Web 服務的引用。報告查看器可以使用由以下任何報告 Web 服務實現(xiàn)生成和提供的報告：
在另一個應用程序中運行的服務。
在 Telerik Report Server 實例中運行的服務。
在同一應用程序中本地托管的服務
如果您需要在本地托管它，請遵循如何在 .NET 5 中的 ASP.NET Core 中托管報表服務一文。（也可以直接看我上一篇文章）
添加 HTML5 報告查看器
-
本教程使用Barcodes Report.trdp報告定義文件，該文件必須位于項目內的Reports文件夾中。
-
確保Startup.cs的Configure方法中的應用程序配置?可以提供靜態(tài)文件：
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
本文摘自 ：https://www.cnblogs.com/
