Stimulsoft Reports.JS stands as a powerful tool for creating and displaying reports within web applications based on frameworks such as Vue.js, React.js, Node.js, and others. In this article, we will guide you through the utilization of our JavaScript report writer in projects and applications built upon the Express framework for Node.js. We will provide a step-by-step guide on how to work with it, along with some samples to help you kick-start your journey.
Step 1. Project setup
To get started, you must either create a new Express.js project or use an existing one. Install the required dependencies by executing the following command in your project directory:npm install stimulsoft-reports-js expressStep 2. Express.js Server Configuration
Next, create a new file in your Node.js project, for example,server.js, and import the necessary modules:
const express = require('express');
const app = express();
const port = 3000; // - any port.
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");
});app.listen(port, () => {
console.log(`Server running on port ${port}`);
});Step 3. Creating a Viewer Page
Generate a new HTML file in the project directory and append the subsequent code to it. This will incorporate the essential Stimulsoft Reports.JS libraries and initialize the viewer:<!DOCTYPE html>
<html>
<head>
<title>Stimulsoft Reports.js Viewer</title>
<script src="/stimulsoft.reports.js"></script>
<script src="/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>Step 4. Create a report template
Create a new file in the directory, for example,SampleReport.mrt. Use Stimulsoft Designer to create a report and save it as SampleReport.mrt. Step 5. Displaying the report in the viewer
Next, set up a route to load the report template and pass it to the viewer:app.get('/report', (req, res) => {
res.sendFile(__dirname + '/SampleReport.mrt');
});viewer.html:
var report = new Stimulsoft.Report.StiReport();
report.loadFile("/report");
viewer.report = report;Step 6. Starting the project
Initiate the project by runningnode 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. Report Designer
To enable the report designer to function, you need to establish a route initially for thestimulsoft.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");
});Create a designer page
The workflow remains consistent - we generate a new file, such asdesigner.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="/stimulsoft.reports.js"></script>
<script src="/stimulsoft.viewer.js"></script>
<script src="/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>