Creating Report at Runtime
Our sample projects and report templates can help you learn the basics of working with our products.Build the report in Vue 3 from code by creating its structure and configuring the required components.
Building the report. Construct the report hierarchy in code, configure the required objects, add them to the template, and render the result.
Building the report. Construct the report hierarchy in code, configure the required objects, add them to the template, and render the result.
<script setup lang="ts">
import { Viewer, Stimulsoft } from 'stimulsoft-reports-js-vuejs/viewer'
var report = new Stimulsoft.Report.StiReport();
// Add data to datastore
var dataSet = new Stimulsoft.System.Data.DataSet();
dataSet.readJsonFile("Data/Demo.json");
report.regData("Demo", "Demo", dataSet);
// Fill dictionary
report.dictionary.synchronize();
var page = report.pages.getByIndex(0);
// Create HeaderBand
var headerBand = new Stimulsoft.Report.Components.StiHeaderBand();
headerBand.height = 0.5;
headerBand.name = "HeaderBand";
page.components.add(headerBand);
// Create text on header
var headerText = new Stimulsoft.Report.Components.StiText(new Stimulsoft.System.Drawing.Rectangle(0, 0, 5, 0.5));
headerText.text = "CompanyName";
headerText.horAlignment = Stimulsoft.Base.Drawing.StiTextHorAlignment.Center;
headerText.name = "HeaderText";
headerText.brush = new Stimulsoft.Base.Drawing.StiSolidBrush(Stimulsoft.System.Drawing.Color.lightGreen);
headerBand.components.add(headerText);
// Create Databand
var dataBand = new Stimulsoft.Report.Components.StiDataBand();
dataBand.dataSourceName = "Customers";
dataBand.height = 0.5;
dataBand.name = "DataBand";
page.components.add(dataBand);
// Create text
var dataText = new Stimulsoft.Report.Components.StiText(new Stimulsoft.System.Drawing.Rectangle(0, 0, 5, 0.5));
dataText.text = "{Line}.{Customers.CompanyName}";
dataText.name = "DataText";
dataBand.components.add(dataText);
// Create FooterBand
var footerBand = new Stimulsoft.Report.Components.StiFooterBand();
footerBand.height = 0.5;
footerBand.name = "FooterBand";
page.components.add(footerBand);
// Create text on footer
var footerText = new Stimulsoft.Report.Components.StiText(new Stimulsoft.System.Drawing.Rectangle(0, 0, 5, 0.5));
footerText.text = "Count: {Count()}";
footerText.horAlignment = Stimulsoft.Base.Drawing.StiTextHorAlignment.Right;
footerText.name = "FooterText";
footerText.brush = new Stimulsoft.Base.Drawing.StiSolidBrush(Stimulsoft.System.Drawing.Color.lightGreen);
footerBand.components.add(footerText);
</script>
<template>
<Viewer :report="report" />
</template>StiHeaderBand, StiDataBand and StiFooterBand are added to a page, and StiText components are placed on them; the data band is bound through dataSourceName and expressions like {Customers.CompanyName}.