Report Viewer SDK
Schedule Free Demo
Try it Free
Search results
Suggest a FeaturePDF

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

This section explains you the steps required to create your first JavaScript reporting application to display already created SSRS RDL report in the Bold Reports® HTML5 JavaScript Report Viewer Classic without using a Report Server.

To get start quickly with Report Viewer Classic, you can check on this video:

HTML file creation

Create a basic HTML file as shown below 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.

Whether you want to get the scripts and style sheets as local, then install the BoldReports.Javascript NuGet package in your application.

<link href="https://cdn.boldreports.com/8.1.1/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/8.1.1/scripts/common/ej2-base.min.js"></script>
<script src="https://cdn.boldreports.com/8.1.1/scripts/common/ej2-data.min.js"></script>
<script src="https://cdn.boldreports.com/8.1.1/scripts/common/ej2-pdf-export.min.js"></script>
<script src="https://cdn.boldreports.com/8.1.1/scripts/common/ej2-svg-base.min.js"></script>
<script src="https://cdn.boldreports.com/8.1.1/scripts/data-visualization/ej2-lineargauge.min.js"></script>
<script src="https://cdn.boldreports.com/8.1.1/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/8.1.1/scripts/data-visualization/ej2-maps.min.js"></script>

<!-- Report Viewer component script-->
<script src="https://cdn.boldreports.com/8.1.1/scripts/common/bold.reports.common.min.js"></script>
<script src="https://cdn.boldreports.com/8.1.1/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/8.1.1/scripts/data-visualization/ej.chart.min.js"></script>
<script src="https://cdn.boldreports.com/8.1.1/scripts/bold.report-viewer.min.js"></script>

Adding Report Viewer Classic Widget

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 shown 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 Report Viewer Classic, looks as follows.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link href="https://cdn.boldreports.com/8.1.1/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/8.1.1/scripts/common/ej2-base.min.js"></script>
<script src="https://cdn.boldreports.com/8.1.1/scripts/common/ej2-data.min.js"></script>
<script src="https://cdn.boldreports.com/8.1.1/scripts/common/ej2-pdf-export.min.js"></script>
<script src="https://cdn.boldreports.com/8.1.1/scripts/common/ej2-svg-base.min.js"></script>
<script src="https://cdn.boldreports.com/8.1.1/scripts/data-visualization/ej2-lineargauge.min.js"></script>
<script src="https://cdn.boldreports.com/8.1.1/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/8.1.1/scripts/data-visualization/ej2-maps.min.js"></script>

<!-- Report Viewer component script-->
<script src="https://cdn.boldreports.com/8.1.1/scripts/common/bold.reports.common.min.js"></script>
<script src="https://cdn.boldreports.com/8.1.1/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/8.1.1/scripts/data-visualization/ej.chart.min.js"></script>
<script src="https://cdn.boldreports.com/8.1.1/scripts/bold.report-viewer.min.js"></script>
    </head>
    <body>
       <script type="text/javascript">
                $(function () {
                    $("#viewer").boldReportViewer();
                });
            </script>
    </body>
</html>