Embedded
Schedule Free Demo
Try it Free
Search results
Suggest a FeaturePDF

CDN

The CDN links are provided individually for all the scripts and style sheets of Bold Reports JavaScript Reporting component.

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 Report Viewer.

Name Details CDN link
bold.reports.common.min.js Common script for reporting widgets. Secured link: https://cdn.boldreports.com/6.3.24/scripts/v2.0/common/bold.reports.common.min.js
Unsecured link: https://cdn.boldreports.com/6.3.24/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/6.3.24/scripts/v2.0/common/bold.reports.widgets.min.js
Unsecured link: https://cdn.boldreports.com/6.3.24/scripts/v2.0/common/bold.reports.widgets.min.js
bold.report-viewer.min.js Renders the Syncfusion JavaScript Report Viewer widget. Secured link: https://cdn.boldreports.com/6.3.24/scripts/v2.0/bold.report-viewer.min.js
Unsecured link: https://cdn.boldreports.com/6.3.24/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 CDN links for all the CSS files are provided in the following table. Refer to 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/6.3.24/content/v2.0/tailwind-light/bold.report-viewer.min.css
Unsecured link: https://cdn.boldreports.com/6.3.24/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/6.3.24/content/v2.0/tailwind-dark/bold.report-viewer.min.css
Unsecured link: https://cdn.boldreports.com/6.3.24/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/6.3.24/content/v2.0/material-light/bold.report-viewer.min.css
Unsecured link: https://cdn.boldreports.com/6.3.24/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/6.3.24/content/v2.0/material-dark/bold.report-viewer.min.css
Unsecured link: https://cdn.boldreports.com/6.3.24/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/6.3.24/content/v2.0/bootstrap-light/bold.report-viewer.min.css
Unsecured link: https://cdn.boldreports.com/6.3.24/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/6.3.24/content/v2.0/bootstrap-dark/bold.report-viewer.min.css
Unsecured link: https://cdn.boldreports.com/6.3.24/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/6.3.24/content/v2.0/fluent-light/bold.report-viewer.min.css
Unsecured link: https://cdn.boldreports.com/6.3.24/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/6.3.24/content/v2.0/fluent-dark/bold.report-viewer.min.css
Unsecured link: https://cdn.boldreports.com/6.3.24/content/v2.0/fluent-dark/bold.report-viewer.min.css

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

Refer local Scripts and CSS when CDN fails

One of the major risks with CDN links is, sometimes, it may go down due to the network or connection problems. On such scenarios, you can refer the local scripts and CSS files dynamically in application by checking if the scripts and CSS files are loaded through CDN that returns undefined as demonstrated in the following code sample.

<!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/6.3.24/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/6.3.24/scripts/v2.0/common/bold.reports.common.min.js"></script>
    <script src="https://cdn.boldreports.com/6.3.24/scripts/v2.0/common/bold.reports.widgets.min.js"></script>
    <script src="https://cdn.boldreports.com/6.3.24/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 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>