Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/stimulsoft/samples-reports.js-for-vue.js

JavaScript samples for Reports.JS report builder for Vue.js applications
https://github.com/stimulsoft/samples-reports.js-for-vue.js

barcode components data database embedded exporting generator hierarchical interaction javascript report report-builder report-engine report-generator reporting samples sorting table vue vuejs

Last synced: about 1 month ago
JSON representation

JavaScript samples for Reports.JS report builder for Vue.js applications

Awesome Lists containing this project

README 

          
# Vue.js samples for Stimulsoft Reports.JS



## Overview

This repository contains the source code of the examples of usage Stimulsoft Reports.JS reporting tool in the Vue.js applications, using JavaScript code and Vue.js components.



#### Localization and Globalization

* [Localizing the Designer](https://github.com/stimulsoft/Samples-Reports.JS-for-Vue.js/blob/main/src/Localization%20and%20Globalization/Localizing%20the%20Designer.vue)

* [Localizing the Viewer](https://github.com/stimulsoft/Samples-Reports.JS-for-Vue.js/blob/main/src/Localization%20and%20Globalization/Localizing%20the%20Viewer.vue)

* [Globalizing Report](https://github.com/stimulsoft/Samples-Reports.JS-for-Vue.js/blob/main/src/Localization%20and%20Globalization/Globalizing%20Report.vue)



#### Fonts and Resources

* [Using a Custom Font](https://github.com/stimulsoft/Samples-Reports.JS-for-Vue.js/blob/main/src/Fonts%20and%20Resources/Using%20a%20Custom%20Font.vue)

* [Adding a Font to the Resource](https://github.com/stimulsoft/Samples-Reports.JS-for-Vue.js/blob/main/src/Fonts%20and%20Resources/Adding%20a%20Font%20to%20the%20Resource.vue)



#### Printing and Exporting

* [Printing a Report from Code](https://github.com/stimulsoft/Samples-Reports.JS-for-Vue.js/blob/main/src/Printing%20and%20Exporting/Printing%20the%20Report%20from%20Code.vue)

* [Exporting a Report to PDF](https://github.com/stimulsoft/Samples-Reports.JS-for-Vue.js/blob/main/src/Printing%20and%20Exporting/Exporting%20a%20Report%20to%20PDF.vue)

* [Exporting a Report to HTML](https://github.com/stimulsoft/Samples-Reports.JS-for-Vue.js/blob/main/src/Printing%20and%20Exporting/Exporting%20a%20Report%20to%20HTML.vue)

* [Exporting a Report from Code with Changing Export Settings](https://github.com/stimulsoft/Samples-Reports.JS-for-Vue.js/blob/main/src/Printing%20and%20Exporting/Exporting%20a%20Report%20from%20Code%20with%20Changing%20Export%20Settings.vue)

* [Exporting Many Files to Single PDF](https://github.com/stimulsoft/Samples-Reports.JS-for-Vue.js/blob/main/src/Printing%20and%20Exporting/Exporting%20Many%20Files%20to%20Single%20PDF.vue)



#### Data Connection and Registration

* [Creating a new Data Connection from code](https://github.com/stimulsoft/Samples-Reports.JS-for-Vue.js/blob/main/src/Data%20Connection%20and%20Registration/Creating%20a%20new%20Data%20Connection%20from%20code.vue)

* [Registering Data from Code](https://github.com/stimulsoft/Samples-Reports.JS-for-Vue.js/blob/main/src/Data%20Connection%20and%20Registration/Registering%20Data%20from%20Code.vue)

* [Using SQL Data Sources](https://github.com/stimulsoft/Samples-Reports.JS-for-Vue.js/blob/main/src/Data%20Connection%20and%20Registration/Using%20SQL%20Data%20Sources.vue)

* [Using Parameters in SQL Query](https://github.com/stimulsoft/Samples-Reports.JS-for-Vue.js/blob/main/src/Data%20Connection%20and%20Registration/Using%20Parameters%20in%20SQL%20Query.vue)

* [Using a Custom Data Adapter](https://github.com/stimulsoft/Samples-Reports.JS-for-Vue.js/blob/main/src/Data%20Connection%20and%20Registration/Using%20a%20Custom%20Data%20Adapter.vue)

* [Supply Custom Headers for JSON Database](https://github.com/stimulsoft/Samples-Reports.JS-for-Vue.js/blob/main/src/Data%20Connection%20and%20Registration/Supply%20Custom%20Headers%20for%20JSON%20Database.vue)



#### Working with Viewer Settings and Events

* [Customizing the Designer](https://github.com/stimulsoft/Samples-Reports.JS-for-Vue.js/blob/main/src/Working%20with%20Designer%20and%20Viewer%20Settings%20and%20Events/Customizing%20the%20Designer.vue)

* [Changing the Designer Theme](https://github.com/stimulsoft/Samples-Reports.JS-for-Vue.js/blob/main/src/Working%20with%20Designer%20and%20Viewer%20Settings%20and%20Events/Changing%20the%20Designer%20Theme.vue)

* [Customizing the Viewer](https://github.com/stimulsoft/Samples-Reports.JS-for-Vue.js/blob/main/src/Working%20with%20Designer%20and%20Viewer%20Settings%20and%20Events/Customizing%20the%20Viewer.vue) 

* [Changing the Viewer Theme](https://github.com/stimulsoft/Samples-Reports.JS-for-Vue.js/blob/main/src/Working%20with%20Designer%20and%20Viewer%20Settings%20and%20Events/Changing%20the%20Viewer%20Theme.vue)

* [Showing a Report in the Viewer without Toolbar](https://github.com/stimulsoft/Samples-Reports.JS-for-Vue.js/blob/main/src/Working%20with%20Designer%20and%20Viewer%20Settings%20and%20Events/Showing%20a%20Report%20in%20the%20Viewer%20without%20Toolbar.vue)

* [Using Designer Events](https://github.com/stimulsoft/Samples-Reports.JS-for-Vue.js/blob/main/src/Working%20with%20Designer%20and%20Viewer%20Settings%20and%20Events/Using%20Designer%20Events.vue)

* [Using Viewer Events](https://github.com/stimulsoft/Samples-Reports.JS-for-Vue.js/blob/main/src/Working%20with%20Designer%20and%20Viewer%20Settings%20and%20Events/Using%20Viewer%20Events.vue)

* [Working with onDesign and onExit Events](https://github.com/stimulsoft/Samples-Reports.JS-for-Vue.js/blob/main/src/Working%20with%20Designer%20and%20Viewer%20Settings%20and%20Events/Working%20with%20onDesign%20and%20onExit%20Events.vue)

* [Using the two Viewer in the One Project](https://github.com/stimulsoft/Samples-Reports.JS-for-Vue.js/blob/main/src/Working%20with%20Designer%20and%20Viewer%20Settings%20and%20Events/Using%20the%20two%20Viewer%20in%20the%20One%20Project.vue)

* [Get a modified Report from the Designer](https://github.com/stimulsoft/Samples-Reports.JS-for-Vue.js/blob/main/src/Working%20with%20Designer%20and%20Viewer%20Settings%20and%20Events/Get%20a%20modified%20Report%20from%20the%20Designer.vue)

* [Using the Right-To-Left Mode in the Viewer](https://github.com/stimulsoft/Samples-Reports.JS-for-Vue.js/blob/main/src/Working%20with%20Designer%20and%20Viewer%20Settings%20and%20Events/Using%20the%20Right-To-Left%20Mode%20in%20the%20Viewer.vue)



#### Working with Reports, and Advanced Features

* [How to Activate the Product](https://github.com/stimulsoft/Samples-Reports.JS-for-Vue.js/blob/main/src/Working%20with%20Reports%20and%20Advanced%20Features/How%20to%20Activate%20the%20Product.vue)

* [Rendering a Report from Code](https://github.com/stimulsoft/Samples-Reports.JS-for-Vue.js/blob/main/src/Working%20with%20Reports%20and%20Advanced%20Features/Rendering%20a%20Report%20from%20Code.vue)

* [Using Report Variables in Code](https://github.com/stimulsoft/Samples-Reports.JS-for-Vue.js/blob/main/src/Working%20with%20Reports%20and%20Advanced%20Features/Using%20Report%20Variables%20in%20Code.vue)

* [Creating Report at Runtime](https://github.com/stimulsoft/Samples-Reports.JS-for-Vue.js/blob/main/src/Working%20with%20Reports%20and%20Advanced%20Features/Creating%20Report%20at%20Runtime.vue)



## Running samples

To run the examples, run the following commands in the console:

* use `npm install` to install requred modules;

* use `npm start` to run sample;

* navigate to http://localhost:5173/.



## Connect to SQL databases

Since pure JavaScript does not have built-in methods for working with remote databases, this functionality is implemented using server-side code. Therefore, Stimulsoft Reports.JS product contains server data adapters implemented using PHP, Node.js, ASP.NET, Java, .NET Core technologies.

* [DataAdapters.JS](https://github.com/stimulsoft/DataAdapters.JS)



## Other JS reporting components

Many examples for other platforms and technologies are collected in separate repositories:

* [HTML / JS](https://github.com/stimulsoft/Samples-Reports.JS-for-HTML)

* [Angular](https://github.com/stimulsoft/Samples-Reports.JS-for-Angular)

* [Node.js](https://github.com/stimulsoft/Samples-Reports.JS-for-Node.js)

* [Python](https://github.com/stimulsoft/Samples-Reports.JS-for-Python)

* [React](https://github.com/stimulsoft/Samples-Reports.JS-for-React)



## About Stimulsoft Reports.JS

Stimulsoft Reports.JS offers a wide range of reporting components created in pure JavaScript. The report builder can be easily integrated into any JavaScript app, works in any modern browser – Chrome, Firefox, Safari, Edge, and supports Node.js. The product contains everything you need to create, edit, build, view and export reports of high complexity.



## Useful links

* [Live Demo](http://demo.stimulsoft.com/#Js)

* [Product Page](https://www.stimulsoft.com/en/products/reports-js)

* [Free Download](https://www.stimulsoft.com/en/downloads)

* [NPM](https://www.npmjs.com/package/stimulsoft-reports-js)

* [Documentation](https://www.stimulsoft.com/en/documentation/online/programming-manual/index.html?reports_js.htm)

* [License](LICENSE.md)