Bold Reports® JavaScript Report Viewer CDN Links

Bold Reports® provides individual CDN links for all the scripts and style sheets of the Bold Reports® JavaScript Report Viewer widget.

The Bold Reports® JavaScript Report Viewer needs the bold.reports.common.min.js, bold.reports.widgets.min.js, and bold.report-viewer.min.js scripts, plus the external jQuery library.

Bold Reports® dependency libraries

The CDN script files are maintained for each version of the Report Platform SDK individually.

The three scripts, namely bold.reports.common.min.js, bold.reports.widgets.min.js, and bold.report-viewer.min.js are mandatory to render the Bold Reports® Report Viewer.

Name Details CDN link
bold.reports.common.min.js Common script for reporting widgets. Secured link: https://cdn.boldreports.com/15.1.10/scripts/v2.0/common/bold.reports.common.min.js
Unsecured link: https://cdn.boldreports.com/15.1.10/scripts/v2.0/common/bold.reports.common.min.js
bold.reports.widgets.min.js Supports Syncfusion® widgets to render in HTML5 format. Secured link: https://cdn.boldreports.com/15.1.10/scripts/v2.0/common/bold.reports.widgets.min.js
Unsecured link: https://cdn.boldreports.com/15.1.10/scripts/v2.0/common/bold.reports.widgets.min.js
bold.report-viewer.min.js Renders the Bold Reports® JavaScript Report Viewer widget. Secured link: https://cdn.boldreports.com/15.1.10/scripts/v2.0/bold.report-viewer.min.js
Unsecured link: https://cdn.boldreports.com/15.1.10/scripts/v2.0/bold.report-viewer.min.js

External dependency libraries

Example: https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js

Name Details CDN link
jQuery 3.6.0 Common jQuery script to render the Syncfusion® JavaScript Reporting widgets Secured link: https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js
Unsecured link: https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js

The Bold Reports® JavaScript Report Viewer has a CDN style sheet for each theme, listed in the following table. The CDN links use the following syntax:

https://cdn.boldreports.com/[version]/content/v2.0/[theme-name]/[fileName]

Name Details CDN link
tailwind-light (default theme) Includes the CSS properties defined for the JavaScript Reporting component in tailwind-light. (Default-theme) Secured link: https://cdn.boldreports.com/15.1.10/content/v2.0/tailwind-light/bold.report-viewer.min.css
Unsecured link: https://cdn.boldreports.com/15.1.10/content/v2.0/tailwind-light/bold.report-viewer.min.css
tailwind-dark Includes the CSS properties defined for the JavaScript Reporting component in tailwind-dark theme. Secured link: https://cdn.boldreports.com/15.1.10/content/v2.0/tailwind-dark/bold.report-viewer.min.css
Unsecured link: https://cdn.boldreports.com/15.1.10/content/v2.0/tailwind-dark/bold.report-viewer.min.css
material-light Includes the CSS properties defined for the JavaScript Reporting component in material-light theme. Secured link: https://cdn.boldreports.com/15.1.10/content/v2.0/material-light/bold.report-viewer.min.css
Unsecured link: https://cdn.boldreports.com/15.1.10/content/v2.0/material-light/bold.report-viewer.min.css
material-dark Includes the CSS properties defined for the JavaScript Reporting component in material-dark theme. Secured link: https://cdn.boldreports.com/15.1.10/content/v2.0/material-dark/bold.report-viewer.min.css
Unsecured link: https://cdn.boldreports.com/15.1.10/content/v2.0/material-dark/bold.report-viewer.min.css
bootstrap-light Includes the CSS properties defined for the JavaScript Reporting component in bootstrap-light theme. Secured link: https://cdn.boldreports.com/15.1.10/content/v2.0/bootstrap-light/bold.report-viewer.min.css
Unsecured link: https://cdn.boldreports.com/15.1.10/content/v2.0/bootstrap-light/bold.report-viewer.min.css
bootstrap-dark Includes the CSS properties defined for the JavaScript Reporting component in bootstrap-dark theme. Secured link: https://cdn.boldreports.com/15.1.10/content/v2.0/bootstrap-dark/bold.report-viewer.min.css
Unsecured link: https://cdn.boldreports.com/15.1.10/content/v2.0/bootstrap-dark/bold.report-viewer.min.css
fluent-light Includes the CSS properties defined for the JavaScript Reporting component in fluent-light theme. Secured link: https://cdn.boldreports.com/15.1.10/content/v2.0/fluent-light/bold.report-viewer.min.css
Unsecured link: https://cdn.boldreports.com/15.1.10/content/v2.0/fluent-light/bold.report-viewer.min.css
fluent-dark Includes the CSS properties defined for the JavaScript Reporting component in fluent-dark theme. Secured link: https://cdn.boldreports.com/15.1.10/content/v2.0/fluent-dark/bold.report-viewer.min.css
Unsecured link: https://cdn.boldreports.com/15.1.10/content/v2.0/fluent-dark/bold.report-viewer.min.css

All the provided CDN links can be accessed either through http or https.

How do I load local scripts and CSS when the CDN fails?

To load local scripts and CSS when the CDN fails, check whether the scripts and CSS files loaded through the CDN return undefined, and then refer the local files dynamically in your JavaScript Report Viewer application. CDN links can go down because of network or connection problems. The following code sample shows this approach.

<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
    <title>My first HTML page</title>
    // CDN LINK references
    <link href="https://cdn.boldreports.com/15.1.10/content/v2.0/tailwind-light/bold.report-viewer.min.css" rel="stylesheet" />
    <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>
    <script src="https://cdn.boldreports.com/15.1.10/scripts/v2.0/bold.report-viewer.min.js"></script>
    <script type="text/javascript">

        if (typeof jQuery == "undefined") { // If CDN fails, jQuery returns undefined
            // Referring local scripts - Specify the path where the below files are located in your machine
            document.write(decodeURIComponent('%3Cscript src="Scripts/jquery/3.6.0/jquery.min.js" %3E%3C/script%3E'));
        }

        if (typeof ej == "undefined") { // If CDN fails, ej returns undefined.
            // Refer the Syncfusion<sup>®</sup> stylesheets and scripts from the local path here

            // StyleSheet reference from the local system path
            document.write(decodeURIComponent('%3Clink rel="stylesheet" href="Content/bold-reports/v2.0/tailwind-light/bold.report-viewer.min.css" %3C/%3E'));
            document.write(decodeURIComponent('%3Cscript src="Scripts/bold-reports/v2.0/common/bold.reports.common.min.js" %3E%3C/script%3E'));
            document.write(decodeURIComponent('%3Cscript src="Scripts/bold-reports/v2.0/common/bold.reports.widgets.min.js" %3E%3C/script%3E'));
            // Script reference from the local system path
            document.write(decodeURIComponent('%3Cscript src="Scripts/bold-reports/v2.0/bold.report-viewer.min.js" %3E%3C/script%3E'));
        }
    </script>
</head>
<body>
    <script type="text/javascript">
        $(function () {
            // initialization boldReportViewer
            $("#viewer").boldReportViewer();
        });
    </script>
</body>
</html>