Stimulsoft Reports.JS is a platform for generating reports using JavaScript and HTML5.
Stimulsoft Reports.js is a platform for generating report using javascript and html5. Normally html design and report geneerating and stimulsoft is autometically report generation and connection string your db connection and wrtie query auto function generation report.
 |
| dbconnection |
Stimulsoft Report is modify design any design easily modifed and watermark and everything is very easy.
 |
| View Report |
Include Files:
<link href="css/demo.css" rel="stylesheet">
<!-- Report Viewer Office2013 style -->
<link href="css/stimulsoft.viewer.office2013.whiteblue.css" rel="stylesheet">
<!-- Report Designer Office2013 style -->
<link href="css/stimulsoft.designer.office2013.whiteblue.css" rel="stylesheet">
<!-- Stimusloft Reports.JS -->
<script src="scripts/stimulsoft.reports.js" type="text/javascript"></script>
<script src="scripts/stimulsoft.viewer.js" type="text/javascript"></script>
<script src="scripts/stimulsoft.designer.js" type="text/javascript"></script>
<!-- Reports -->
<script src="reports/OnlineStoreSales.js" type="text/javascript"></script>
<script src="reports/UsersAppleIpad.js" type="text/javascript"></script>
<script src="reports/SmartphoneBestsellersInQ12015.js" type="text/javascript"></script>
<script src="reports/SiteStatistics.js" type="text/javascript"></script>
<script src="reports/HighlightCondition.js" type="text/javascript"></script>
<script src="reports/Images.js" type="text/javascript"></script>
<script src="reports/MasterDetail.js" type="text/javascript"></script>
<script src="reports/MultiColumnList.js" type="text/javascript"></script>
<script src="reports/SideBySideListWithContainers.js" type="text/javascript"></script>
<script src="reports/SimpleGroup.js" type="text/javascript"></script>
<script src="reports/SimpleList.js" type="text/javascript"></script>
<script src="reports/ParametersSelectingCountry.js" type="text/javascript"></script>
<!-- Demo data -->
<script>
var viewer = null;
var designer = null;
function createViewer() {
// Specify necessary options for the viewer
var options = new Stimulsoft.Viewer.StiViewerOptions();
options.height = "100%";
options.appearance.scrollbarsMode = true;
options.toolbar.showDesignButton = true;
options.toolbar.printDestination = Stimulsoft.Viewer.StiPrintDestination.Direct;
options.appearance.htmlRenderMode = Stimulsoft.Report.Export.StiHtmlExportMode.Table;
// Create an instance of the viewer
viewer = new Stimulsoft.Viewer.StiViewer(options, "StiViewer", false);
// Add the design button event
viewer.onDesignReport = function (e) {
this.visible = false;
if (designer == null) createDesigner();
designer.visible = true;
designer.report = e.report;
};
viewer.renderHtml("viewerContent");
}
function createDesigner() {
var options = new Stimulsoft.Designer.StiDesignerOptions();
options.appearance.fullScreenMode = true;
options.appearance.htmlRenderMode = Stimulsoft.Report.Export.StiHtmlExportMode.Table;
// Create an instance of the designer
designer = new Stimulsoft.Designer.StiDesigner(options, "StiDesigner", false);
// Add the exit menu item event
designer.onExit = function (e) {
this.visible = false;
viewer.visible = true;
}
designer.renderHtml("designerContent");
}
function setReport(reportObject) {
// Forcibly show process indicator
viewer.showProcessIndicator();
// Timeout need for immediate display loading report indicator
setTimeout(function () {
// Create a new report instance
var report = new Stimulsoft.Report.StiReport();
// Load reports from JSON object
report.load(reportObject);
// Remove all connections in report template (they are used in the first place)
report.dictionary.databases.clear();
// Registered JSON data specified in the report with same name
report.regData("Demo", "Demo", Demo);
// Assign the report to the viewer
viewer.report = report;
}, 50);
}
// Set report button style
function setReportButton(button) {
for (var reportName in reportsCollection) {
var reportButton = document.getElementById(reportName);
reportButton.isSelected = reportButton == button;
reportButton.className = reportButton.isSelected ? "ReportButton Selected" : "ReportButton";
}
}
// Load first report after the page is loaded
function onBodyLoad() {
createViewer();
selectedButton = document.getElementById("SimpleList");
onButtonClick(selectedButton, SimpleList);
}
// Demo Report button events
// ---
function onButtonClick(button, reportObject) {
selectedButton.className = "ReportButton";
button.className = "ReportButton Selected";
selectedButton = button;
setReport(reportObject);
}
function onButtonMouseOver(button) {
if (button != selectedButton) button.className = "ReportButton Over";
}
function onButtonMouseOut(button) {
if (button != selectedButton) button.className = "ReportButton";
}
</script>
Html Files<body onload="onBodyLoad();">
<div id="designerContent"></div>
<table class="Main" cellpadding="0" cellspacing="4">
<tr>
<td width="150px">
<table class="LeftPanel" cellpadding="0" cellspacing="0">
<tr>
<td height="60px">
<img style="position: absolute; width: 150px; left: 0px; top: 5px;" src="images/StimulsoftReports.png" />
<img style="position: absolute; width: 30px; height: 30px; left: 105px; top: 25px;" src="images/Js.png" />
</td>
</tr>
<tr>
<td height="90%">
<div class="Buttons">
<script type="text/javascript">
// Report id and names for this Demo
var reportsCollection = {
"OnlineStoreSales": "Online Store Sales",
"SimpleList": "Simple List",
"HighlightCondition": "Highlight Condition",
"Images": "Images",
"MasterDetail": "Master-Detail",
"UsersAppleIpad": "Users Apple Ipad",
"SmartphoneBestsellersInQ12015": "Smartphone Bestsellers In Q1 2015",
"MultiColumnList": "Multi-Column List",
"SimpleGroup": "Simple Group",
"SiteStatistics": "Site Statistics",
"ParametersSelectingCountry": "Parameters Selecting Country"
};
// Render all report buttons
for (var reportName in reportsCollection) {
document.write(
"<a class=\"ReportButton\" id=\"" + reportName + "\"" +
"onmouseover=\"onButtonMouseOver(this)\"" +
"onmouseout=\"onButtonMouseOut(this)\"" +
"onclick=\"onButtonClick(this, " + reportName + ")\">" +
"<table cellpadding=\"0\" cellspacing=\"0\">" +
"<tr><td style=\"text-align: center; width: 100%;\"><img src=\"images/" + reportName + ".png\" /></td></tr>" +
"<tr><td class=\"Caption\">" + reportsCollection[reportName] + "</td></tr>" +
"</table>" +
"</a>");
}
</script>
</div>
</td>
</tr>
</table>
</td>
<td height="100%" id="viewerContent"></td>
</tr>
</table>
</body>
</html>