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

<!-- Report Viewer component script-->
<script src="https://cdn.boldreports.com/6.3.24/scripts/common/bold.reports.common.min.js"></script>
<script src="https://cdn.boldreports.com/6.3.24/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/6.3.24/scripts/data-visualization/ej.chart.min.js"></script>
<script src="https://cdn.boldreports.com/6.3.24/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/6.3.24/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/6.3.24/scripts/common/ej2-base.min.js"></script>
<script src="https://cdn.boldreports.com/6.3.24/scripts/common/ej2-data.min.js"></script>
<script src="https://cdn.boldreports.com/6.3.24/scripts/common/ej2-pdf-export.min.js"></script>
<script src="https://cdn.boldreports.com/6.3.24/scripts/common/ej2-svg-base.min.js"></script>
<script src="https://cdn.boldreports.com/6.3.24/scripts/data-visualization/ej2-lineargauge.min.js"></script>
<script src="https://cdn.boldreports.com/6.3.24/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/6.3.24/scripts/data-visualization/ej2-maps.min.js"></script>

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