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

To display an existing SSRS RDL report in the Bold Reports® HTML5 JavaScript Report Viewer Classic without a Report Server, create an HTML page, refer the required scripts and styles from CDN, and initialize the boldReportViewer widget.

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

HTML file creation

Create a basic HTML file and place it in a separate folder.

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

Refer scripts and CSS

Directly refer all the required scripts and style sheets from the CDN links that are mandatorily required to use the Report Viewer, in the following order.

  • bold.reports.all.min.css
  • jquery.min.js
  • ej2-base.min.js, ej2-data.min.js, ej2-pdf-export.min.js, ej2-svg-base.min.js, ej2-lineargauge.min.js, and ej2-circulargauge.min.js - Renders the gauge item. Add these scripts only if your report contains the gauge report item.
  • ej2-maps.min.js - Renders the map item. Add this script only if your report contains the map report item.
  • bold.reports.common.min.js
  • bold.reports.widgets.min.js
  • ej.chart.min.js - Renders the chart item. Add this script only if your report contains the chart report item.
  • bold.report-viewer.min.js

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.

<link href="https://cdn.boldreports.com/15.1.10/content/material/bold.reports.all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!--Render the gauge item. Add this script only if your report contains the gauge report item. -->
<script src="https://cdn.boldreports.com/15.1.10/scripts/common/ej2-base.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/common/ej2-data.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/common/ej2-pdf-export.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/common/ej2-svg-base.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/data-visualization/ej2-lineargauge.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/data-visualization/ej2-circulargauge.min.js"></script>

<!--Render the map item. Add this script only if your report contains the map report item.-->
<script src="https://cdn.boldreports.com/15.1.10/scripts/data-visualization/ej2-maps.min.js"></script>

<!-- Report Viewer component script-->
<script src="https://cdn.boldreports.com/15.1.10/scripts/common/bold.reports.common.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/common/bold.reports.widgets.min.js"></script>

<!--Render the chart item. Add this script only if your report contains the chart report item.-->
<script src="https://cdn.boldreports.com/15.1.10/scripts/data-visualization/ej.chart.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/bold.report-viewer.min.js"></script>

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

Add the <div> element within the <body> section, which acts as a container for the boldReportViewer widget to render and then initialize the boldReportViewer widget within the script section as follows:

<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>

The HTML page for the Report Viewer Classic looks as follows:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link href="https://cdn.boldreports.com/15.1.10/content/material/bold.reports.all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!--Render the gauge item. Add this script only if your report contains the gauge report item. -->
<script src="https://cdn.boldreports.com/15.1.10/scripts/common/ej2-base.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/common/ej2-data.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/common/ej2-pdf-export.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/common/ej2-svg-base.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/data-visualization/ej2-lineargauge.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/data-visualization/ej2-circulargauge.min.js"></script>

<!--Render the map item. Add this script only if your report contains the map report item.-->
<script src="https://cdn.boldreports.com/15.1.10/scripts/data-visualization/ej2-maps.min.js"></script>

<!-- Report Viewer component script-->
<script src="https://cdn.boldreports.com/15.1.10/scripts/common/bold.reports.common.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/common/bold.reports.widgets.min.js"></script>

<!--Render the chart item. Add this script only if your report contains the chart report item.-->
<script src="https://cdn.boldreports.com/15.1.10/scripts/data-visualization/ej.chart.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/bold.report-viewer.min.js"></script>
    </head>
    <body>
       <script type="text/javascript">
                $(function () {
                    $("#viewer").boldReportViewer();
                });
            </script>
    </body>
</html>