This example illustrates how to load the MRT report template, load the JSON data, and render the report with this data. First of all, you should add Stimulsoft modules to the project. To do this, just use one universal package, all other dependencies will be loaded automatically:

// Stimulsoft Reports module
var Stimulsoft = require('stimulsoft-reports-js');
console.log("Stimulsoft Reports loaded");

For the correct rendering of reports and accurate calculation of the sizes of all elements, you should load the fonts you are going to use. In this example, the Roboto-Black font is used, load it using a special addOpentypeFontFile() static method. The font will be loaded and added to the internal font collection:

// Loading fonts
Stimulsoft.Base.StiFontCollection.addOpentypeFontFile("Roboto-Black.ttf");
console.log("Font loaded");

Now you should create a new StiReport object and load the previously prepared report template using the loadFile() method. As an argument, specify the path to the MRT template file:

// Creating new report
var report = new Stimulsoft.Report.StiReport();
console.log("New report created");

// Loading report template
report.loadFile("SimpleList.mrt");
console.log("Report template loaded");

To load a JSON data file, you should create a new DataSet object. Next, you can use the special readJsonFile() method, the path to the data file should be specified as an argument of the function. All data from the file will be loaded and converted to a universal data set:

// Create new DataSet object
var dataSet = new Stimulsoft.System.Data.DataSet("Demo");
// Load JSON data file from specified URL to the DataSet object
dataSet.readJsonFile("Demo.json");

Before registering the data, you must delete all existing data connections in the report. To do this, just clear the connection collection in the data dictionary. Finally, register the previously loaded data in the report using the regData() method, specify the name of the data source, its alias, and the DataSet object in the arguments:

// Remove all connections from the report template
report.dictionary.databases.clear();
// Register DataSet object
report.regData("Demo", "Demo", dataSet);

To render a report, call the asynchronous renderAsync() method, which will perform all the necessary actions. Also, you can specify a callback function in the method arguments, which will be called after rendering:

// Renreding report
report.renderAsync(function () {
    console.log("Report rendered. Pages count: ", report.renderedPages.count);

    // Saving rendered report to file
    report.saveDocumentFile("SimpleList.mdc");
    console.log("Rendered report saved");
});

Auf dem Screenshot unten Sie können das Ergebnis des Beispiel-Codes ansehen: