Display SSRS RDL report in Bold Reports® HTML5 JavaScript Report Viewer

To display an already created SSRS RDL report in the Bold Reports® HTML5 JavaScript Report Viewer without a Report Server, create an HTML page, refer the Report Viewer scripts and styles, and set the reportPath and reportServiceUrl properties.

To get started quickly with the JavaScript Report Viewer, watch the following video:

HTML file creation

Create a basic HTML file for the JavaScript Report Viewer and place it in a separate folder.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>Report Viewer first HTML page</title>
    </head>
    <body>
    </body>
</html>

Refer scripts and CSS

Refer the scripts and style sheets that the JavaScript Report Viewer requires directly from the CDN links, in the following order.

  • bold.report-viewer.min.css
  • jquery.min.js
  • bold.reports.common.min.js
  • bold.reports.widgets.min.js
  • bold.report-viewer.min.js

Refer to the Bold Reports® CDN to learn more details about the Bold Reports® CDN scripts and style sheet links.

You can replace the following code in the <head> tag of the Report Viewer HTML page.

To get the scripts and style sheets locally, install the BoldReports.Javascript NuGet package in your application.

<!-- Report Viewer component styles -->
<link href="https://cdn.boldreports.com/15.1.10/content/v2.0/tailwind-light/bold.report-viewer.min.css" rel="stylesheet" />

<!-- Report Viewer component dependent script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/v2.0/common/bold.reports.common.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/v2.0/common/bold.reports.widgets.min.js"></script>

<!-- Report Viewer component script -->
<script src="https://cdn.boldreports.com/15.1.10/scripts/v2.0/bold.report-viewer.min.js"></script>

How do I add the Report Viewer widget to a JavaScript application?

Add the <div> element within the <body> section to act as a container for the boldReportViewer widget. Then initialize the boldReportViewer widget within the script section, as in the following code:

<div style="height: 600px; width: 950px;">
    <!-- Creating a div tag which will act as a container for boldReportViewer widget.-->
    <div style="height: 600px; width: 950px; min-height: 400px;" id="viewer"></div>
    <!-- Setting property and initializing boldReportViewer widget.-->
    <script type="text/javascript">
        $(function () {
            $("#viewer").boldReportViewer();
        });
    </script>
</div>

Create Web API service

The JavaScript Report Viewer requires a Web API service to process the report files. You can skip this step and use the online Web API services to preview the already available reports. Otherwise, create one of the following Web API services:

To load the report directly from SQL Server Reporting Services (SSRS), skip the following steps and go to SSRS Report.

Adding already created report

If you have created a new service, add the reports from the Bold Reports® installation location. For more information, refer to the samples and demos section.

  1. Create a folder Resources in your Web API application to store RDL reports and add the already created reports to it.

  2. Add already created reports to the newly created folder.

    This tutorial uses the sales-order-detail.rdl report. You can download the sales-order-detail.rdl sample report.

To create a new report, refer to the create RDL report section.

How do I set the report path and Web API service for the JavaScript Report Viewer?

To render the reports available in your application, set the reportPath and reportServiceUrl properties of the Report Viewer.

<div style="height: 600px; width: 950px;">
    <!-- Creating a div tag which will act as a container for boldReportViewer widget.-->
    <div style="height: 600px; width: 950px; min-height: 400px;" id="viewer"></div>
    <!-- Setting property and initializing boldReportViewer widget.-->
    <script type="text/javascript">
        $(function () {
            $("#viewer").boldReportViewer({
                reportServiceUrl: "https://demos.boldreports.com/services/api/ReportViewer",
                reportPath: '~/Resources/docs/sales-order-detail.rdl'
            });
        });
    </script>
</div>

In the preceding code, the reportServiceUrl uses an online URL. You can host the Bold Reports® service at any Azure, AWS, or own domain URL and use it in the Report Viewer. You can view the already created Web API service in the Reporting Service GitHub location.

Preview the report

Open your HTML page in the web browser, and the JavaScript Report Viewer displays the report.

index.html
index.js
ReportViewerController.cs
    <body style="overflow: hidden; position: static; margin: 0; padding: 0; height: 100%; width: 100%;">
    <div id="viewer" style="position: absolute; height: 100%; width: 100%;"></div>
    <script src="index.js"></script>
    </body>
$(function () {
    $("#viewer").boldReportViewer({
        reportServiceUrl: "https://demos.boldreports.com/services/api/ReportViewer",
        reportPath: '~/Resources/docs/sales-order-detail.rdl'
    });
});
   public class ReportViewerController : ApiController, IReportController
    {
        // Post action for processing the RDL/RDLC report
        public object PostReportAction(Dictionary<string, object> jsonResult)
        {
            return ReportHelper.ProcessReport(jsonResult, this);
        }

        // Get action for getting resources from the report
        [System.Web.Http.ActionName("GetResource")]
        [AcceptVerbs("GET")]
        public object GetResource(string key, string resourcetype, bool isPrint)
        {
            return ReportHelper.GetResource(key, resourcetype, isPrint);
        }

        // Method that will be called when initialize the report options before start processing the report
        [NonAction]
        public void OnInitReportOptions(ReportViewerOptions reportOption)
        {
            // You can update report options here
        }

        // Method that will be called when reported is loaded
        [NonAction]
        public void OnReportLoaded(ReportViewerOptions reportOption)
        {
            // You can update report options here
        }
    }

Note: See the JavaScript Report Viewer feature tour for its features. You can also view the JavaScript Report Viewer examples which demonstrate the rendering of SSRS RDLC and RDL reports.

See Also

Getting started for Report Viewer Classic (v1.0)

Render report with data visualization report items

Create RDLC report

Render RDLC reports

Preview report in print mode

Set data source credential for shared data sources

Change data source connection string

List of SSRS server versions are supported in Bold Reports®