The CDN links are provided individually for all the scripts and style sheets of Bold Reports JavaScript Reporting component.
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
, andbold.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.16/scripts/v2.0/common/bold.reports.common.min.js Unsecured link: https://cdn.boldreports.com/6.3.16/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.16/scripts/v2.0/common/bold.reports.widgets.min.js Unsecured link: https://cdn.boldreports.com/6.3.16/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.16/scripts/v2.0/bold.report-viewer.min.js Unsecured link: https://cdn.boldreports.com/6.3.16/scripts/v2.0/bold.report-viewer.min.js |
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]
All the provided CDN links can be accessed either through
http
orhttps
.
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.16/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.16/scripts/v2.0/common/bold.reports.common.min.js"></script>
<script src="https://cdn.boldreports.com/6.3.16/scripts/v2.0/common/bold.reports.widgets.min.js"></script>
<script src="https://cdn.boldreports.com/6.3.16/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>