APP
本文將指導(dǎo)您如何在 .NET 5 Web 應(yīng)用程序的ASP.NET Core 中添加 HTML5 報告查看器 。
先決條件
報告查看器需要對正在運(yùn)行的報告 Web 服務(wù)的引用。報告查看器可以使用由以下任何報告 Web 服務(wù)實(shí)現(xiàn)生成和提供的報告：
在另一個應(yīng)用程序中運(yùn)行的服務(wù)。
在 Telerik Report Server 實(shí)例中運(yùn)行的服務(wù)。
在同一應(yīng)用程序中本地托管的服務(wù)
如果您需要在本地托管它，請遵循如何在 .NET 5 中的 ASP.NET Core 中托管報表服務(wù)一文。（也可以直接看我上一篇文章）
添加 HTML5 報告查看器
-
本教程使用Barcodes Report.trdp報告定義文件，該文件必須位于項(xiàng)目內(nèi)的Reports文件夾中。
-
確保Startup.cs的Configure方法中的應(yīng)用程序配置?可以提供靜態(tài)文件：
app.UseStaticFiles();
3.通過右鍵單擊wwwroot和Add > New Item... > HTML Page為 HTML5 報告查看器添加 HTML 頁面。將文件命名為index.html并添加 HTML5 報告查看器的初始化。有關(guān)詳細(xì)說明，請查看 HTML5 Report Viewer?Manual Setup幫助文章。下面的示例中列出了對 jQuery 和 Telerik Kendo UI CSS 和 JS 文件的必需引用。默認(rèn)情況下，必要的報表查看器腳本和樣式由 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.最后，運(yùn)行項(xiàng)目查看報告。
演示項(xiàng)目
完整示例可以在 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/
