The following article guides you how to add HTML5 Report Viewer in an ASP.NET Core 3+ web application.

Reports Web Service prerequisite

The report viewer consumes reports generated and served from a running Reports Web Service. Such can be referenced from another application or Telerik Report Server instance or it can be hosted locally. In case you need to host it locally follow the article How to Host Reports Service in ASP.NET Core 3+.

Adding the HTML5 Report Viewer

  1. This tutorial will use Barcodes Report.trdp which should be located in a Reports folder inside the project. It should be available when following the article provided in the Reports Web Service prerequisite section.

  2. Make sure app configuration inside the Configure method of the Startup.cs can serve static files:

    C#
    app.UseStaticFiles();
  3. Add a 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. By default the necessary Report Viewer scripts and styles are served by the REST Service.

    The complete report viewer page should look like this:

    HTML
    <!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://code.jquery.com/jquery-3.3.1.min.js"></script> 
    
      <link href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.common.min.css" rel="stylesheet" /> 
      <link href="https://kendo.cdn.telerik.com/2020.1.114/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. Set the launchSettings.json launchUrl to the new HTML page.

  5. Finally, run the project to see the report.

See Also

Other Resources

In this article
Not finding the help you need?