Using the HTML5 Report Viewer in ASP.NET Core 2.1 and 2.2 Applications
This article guides you on how to add the HTML5 Report Viewer in an ASP.NET Core 2.1 or 2.2 web application.
Prerequisites
The report viewer requires a reference to a running Reports Web Service. The report viewer can consume reports generated and served by any of the following Reports Web Service implementations:
- A service that runs in another application.
- A service that runs in a Telerik Report Server instance.
- A service that is hosted locally in the same application.
In case you need to host it locally, follow the article How to Host Reports Service in ASP.NET Core 2.1 and 2.2.
Adding the HTML5 Report Viewer
This tutorial uses the Barcodes Report.trdp report definitions file that must be located in a Reports folder inside the project. Follow these steps to make the Barcodes Report.trdp file available in your project.
-
Make sure that the app configuration inside the Configure method of the Startup.cs can serve static files:
app.UseStaticFiles(); -
Add an HTML Page for the HTML5 Report Viewer by right-clicking on wwwroot and Add > New Item... > HTML Page. Name the file index.html and add the HTML5 Report Viewer's initialization. For a detailed explanation, check the HTML5 Report Viewer Manual Setup help article. The required references to jQuery and Telerik Kendo UI CSS and JS files are listed in the example below. Copy the Kendo subset from {Telerik Reporting installation path}\Html5\ReportViewer folder to
wwwroot. The complete report viewer page should look like this:<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Telerik HTML5 Report Viewer Demo in ASP.NET Core</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/2022.3.913/styles/kendo.common.min.css" rel="stylesheet" /> <link href="https://kendo.cdn.telerik.com/2022.3.913/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> Set the launchSettings.json launchUrl to the new HTML page.
- Finally, run the project to see the report.