Stimulsoft Reports.JS for Vue.js

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-vuejs

Designer Component

The Designer component is a Vue.js component for integrating Stimulsoft Reports Designer into your Vue.js 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 Vue.js application:

<template>
  <Designer
    :report="report"
    :visible="true"
    :options="options"
    id="designer1"
    @saveReport="handleSaveReport"
  />
</template>

<script>
import { Designer, Stimulsoft } from 'stimulsoft-reports-js-vuejs';

export default {
  components: { Designer },
  data() {
    return {
      report: new Stimulsoft.Report.StiReport(),
      options: new Stimulsoft.Designer.StiDesignerOptions(),
    };
  },
  methods: {
    handleSaveReport(args, callback) {
      console.log('Saving report:', args);
    },
  },
};
</script>

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 | |-----------------------|--------------------------------------------------------------------------| | prepareVariables | Triggered to prepare variables. | | beginProcessData | Triggered at the beginning of data processing. | | endProcessData | Triggered at the end of data processing. | | createReport | Triggered when a new report is created. | | closeReport | Triggered when a report is closed. | | openReport | Triggered when a report is opened. | | openedReport | Triggered after a report is opened. | | saveReport | Triggered when a report is saved. | | saveAsReport | Triggered when a report is saved as a new file. | | previewReport | Triggered when a report is previewed. | | exit | Triggered when the designer is exited. | | assignedReport | Triggered when a report is assigned to the designer. |

Viewer Component

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

Usage

Here is an example of how to use the Viewer component in your Vue.js application:

<template>
  <Viewer
    :report="report"
    :visible="true"
    :options="options"
    id="viewer1"
    @printReport="handlePrintReport"
  />
</template>

<script>
import { Viewer, Stimulsoft } from 'stimulsoft-reports-js-vuejs';

export default {
  components: { Viewer },
  data() {
    return {
      report: new Stimulsoft.Report.StiReport(),
      options: new Stimulsoft.Viewer.StiViewerOptions(),
    };
  },
  methods: {
    handlePrintReport(args, callback) {
      console.log('Printing report:', args);
    },
  },
};
</script>

Properties

The Viewer component accepts the following properties:

| Property | Description | |-----------------------|--------------------------------------------------------------------------| | report | The report object to be displayed in the viewer. | | visible | Determines whether the viewer is visible. | | options | Configuration options for the viewer. | | id | Unique identifier for the viewer instance. |

Events

The Viewer component provides the following event handlers:

| Event | Description | |-----------------------|--------------------------------------------------------------------------| | prepareVariables | Triggered to prepare variables. | | beginProcessData | Triggered at the beginning of data processing. | | endProcessData | Triggered at the end of data processing. | | printReport | Triggered when a report is printed. | | beginExportReport | Triggered at the beginning of report export. | | endExportReport | Triggered at the end of report export. | | interaction | Triggered during report interaction. | | emailReport | Triggered when a report is emailed. | | designReport | Triggered when a report is sent to the designer. | | showReport | Triggered when a report is shown. | | openReport | Triggered when a report is opened. | | openedReport | 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