npm install stimulsoft-reports-js express
server.js
, and import the necessary modules:
const express = require('express');
const app = express();
const port = 3000; // - any port.
Next, set up a route for the viewer.html
page:
app.get('/viewer', (req, res) => {
res.sendFile(__dirname + '/viewer.html');
});
app.get('/stimulsoft.reports.js', (req, res) => {
res.sendFile(__dirname + "/node_modules/stimulsoft-reports-js/Scripts/stimulsoft.reports.js");
});
app.get('/stimulsoft.viewer.js', (req, res) => {
res.sendFile(__dirname + "/node_modules/stimulsoft-reports-js/Scripts/stimulsoft.viewer.js");
});
Start the server by adding the following code to the end of the file:
app.listen(port, () => {
console.log(`Server running on port $`);
});
<!DOCTYPE html>
<html>
<head>
<title>Stimulsoft Reports.js Viewer</title>
<script src="https://www.stimulsoft.com/stimulsoft.reports.js"></script>
<script src="https://www.stimulsoft.com/stimulsoft.viewer.js"></script>
</head>
<body>
<div id="viewer"></div>
<script>
var options = new Stimulsoft.Viewer.StiViewerOptions();
var viewer = new Stimulsoft.Viewer.StiViewer(options, "StiViewer", false);
viewer.renderHtml("viewer");
</script>
</body>
</html>
SampleReport.mrt
. Use Stimulsoft Designer to create a report and save it as SampleReport.mrt
. app.get('/report', (req, res) => {
res.sendFile(__dirname + '/SampleReport.mrt');
});
Then add the code to viewer.html
:
var report = new Stimulsoft.Report.StiReport();
report.loadFile("/report");
viewer.report = report;
node server.js
and access http://localhost:3000/reports
in a browser to preview the page. Once the template has been integrated into the project, the report will be showcased within the viewer. stimulsoft.designer.js
file and subsequently for the designer.html
page.
app.get('/designer', (req, res) => {
res.sendFile(__dirname + '/designer.html');
});
app.get('/stimulsoft.viewer.js', (req, res) => {
res.sendFile(__dirname + "/node_modules/stimulsoft-reports-js/Scripts/stimulsoft.designer.js");
});
designer.html
, within the project directory. Then, we incorporate the subsequent code into the HTML file to load the essential Stimulsoft Reports.JS libraries and initialize the designer:
<!DOCTYPE html>
<html>
<head>
<title>Stimulsoft Reports.js Designer</title>
<script src="https://www.stimulsoft.com/stimulsoft.reports.js"></script>
<script src="https://www.stimulsoft.com/stimulsoft.viewer.js"></script>
<script src="https://www.stimulsoft.com/stimulsoft.designer.js"></script>
</head>
<body>
<div id="designer"></div>
<script>
var options = new Stimulsoft.Designer.StiDesignerOptions();
var designer = new Stimulsoft.Designer.StiDesigner(options, "StiDesigner", false);
designer.renderHtml("designer");
var report = new Stimulsoft.Report.StiReport();
report.loadFile("/report");
designer.report = report;
</script>
</body>
</html>