stimulsoft-reports-js-angular

Stimulsoft Reports.JS for Angular

Stimulsoft Reports.JS is a set of reporting tools designed on JavaScript and HTML5 technologies. The report generator works in any JavaScript application, and installation of any browser extensions or frameworks is not required. The product contains everything you need to create, edit, build, view, and export reports to PDF, PowerPoint, HTML, Word, Text, Excel, OpenDocument Writer and Calc, Image (Svg) and Data (Csv).

Data analytics tool for creating dashboards - Stimulsoft Dashboard.JS NPM, GitHub

How to install

Create a project folder and install Reports.JS module using the specified command:

npm install stimulsoft-reports-js-angular

Designer Component

The Designer component is an Angular component for integrating Stimulsoft Reports Designer into your Angular applications. It provides a wide range of properties and event handlers to customize the behavior and appearance of the designer.

Usage

Here is an example of how to use the Designer component in your Angular application:

import { Component } from '@angular/core';
import { Designer, Stimulsoft } from "stimulsoft-reports-js-angular/designer";

@Component({
  selector: 'app-root',
  template: `
    <sti-designer
      [report]="report"
      [visible]="true"
      [options]="options"
      [id]="'designer1'"
      (onSaveReport)="handleSaveReport($event)"
    ></sti-designer>
  `,
})
export class AppComponent {
  report = new Stimulsoft.Report.StiReport();
  options = new Stimulsoft.Designer.StiDesignerOptions();

  handleSaveReport(args: any): void {
    console.log('Saving report:', args);
  }
}

Properties

The Designer component accepts the following properties:

Property	Description
report	The report object to be edited in the designer.
visible	Determines whether the designer is visible.
options	Configuration options for the designer.
id	Unique identifier for the designer instance.

Events

The Designer component provides the following event handlers:

Event	Description
onPrepareVariables	Triggered to prepare variables.
onBeginProcessData	Triggered at the beginning of data processing.
onEndProcessData	Triggered at the end of data processing.
onCreateReport	Triggered when a new report is created.
onCloseReport	Triggered when a report is closed.
onOpenReport	Triggered when a report is opened.
onOpenedReport	Triggered after a report is opened.
onSaveReport	Triggered when a report is saved.
onSaveAsReport	Triggered when a report is saved as a new file.
onPreviewReport	Triggered when a report is previewed.
onExit	Triggered when the designer is exited.
onAssignedReport	Triggered when a report is assigned to the designer.

Viewer Component

The Viewer component is a React component for integrating Stimulsoft Reports Viewer into your React applications. It allows you to display and interact with reports.

Usage

Here is an example of how to use the Viewer component in your React application:

import { Component } from '@angular/core';
import { Viewer, Stimulsoft } from "stimulsoft-reports-js-angular/viewer";

@Component({
  selector: 'app-root',
  template: `
    <sti-viewer
      [report]="report"
      [visible]="true"
      [options]="options"
      [id]="'viewer1'"
      (onPrintReport)="handlePrintReport($event)"
    ></sti-viewer>
  `,
})
export class AppComponent {
  report = new Stimulsoft.Report.StiReport();
  options = new Stimulsoft.Viewer.StiViewerOptions();

  handlePrintReport(args: any): void {
    console.log('Printing report:', args);
  }
}

Properties

The Viewer component accepts the following properties:

Property	Type	Description
report	Stimulsoft.Report.StiReport	The report object to be displayed in the viewer.
visible	boolean	Determines whether the viewer is visible.
options	Stimulsoft.Viewer.StiViewerOptions	Configuration options for the viewer.
id	string	Unique identifier for the viewer instance.

Events

The Viewer component provides the following event handlers:

Event	Description
onPrepareVariables	Triggered to prepare variables.
onBeginProcessData	Triggered at the beginning of data processing.
onEndProcessData	Triggered at the end of data processing.
onPrintReport	Triggered when a report is printed.
onBeginExportReport	Triggered at the beginning of report export.
onEndExportReport	Triggered at the end of report export.
onInteraction	Triggered during report interaction.
onEmailReport	Triggered when a report is emailed.
onDesignReport	Triggered when a report is sent to the designer.
onShowReport	Triggered when a report is shown.
onOpenReport	Triggered when a report is opened.
onOpenedReport	Triggered after a report is opened.

Integration

Our report generator is excellent for working in any JavaScript application. Components are optimized to work with most popular platforms such as Node.js, Angular, React, Vue.js, and others. For integration you need to install only one package from the NPM repository, or download the package from our website to a computer and add several scripts and css-styles to the project. All other things you can find in our, on pure JavaScript developed report builder.

Live Demo

We prepared many templates of reports and dashboards that you can explore and edit in our online demo. Choose the template you need, connect your data, and create rich reports and analytical dashboards – the solution is ready. Try the Live Demo

More about product

In Stimulsoft Reports.JS, we have included a complete set of tools and components to design simple and complex reports. Texts, images, charts, barcodes, many preset styles, grouping and filtering, interactive reports, and much more. You can work with reports and their components directly from the JavaScript code. Read more about Stimulsoft Reports.JS.

Video and Documentation

We provide User Manuals and Class References intended to give technical assistance to users of our reporting tool. Find more information in the Online Documentation.

Also, we prepared many videos about the working of our software. Watch videos on our YouTube channel.

Download

License Info

Online Store