How to use FastReport Open Source with Vue.Js

Presently popular SPA - one-page applications - use different frameworks and libraries. But, if they can work with the server part on the basis of ASP .Net Core, then you can always use the free report generator FastReport OpenSource.

Today we will look at an example of displaying the report FastReport.OpenSource in a one-page application based on the popular framework Vue.js.

To create SPA application based on the Vue.js library with the server part on ASP .Net Core MVC, you must have:

1.  Node.js – software package for running JavaScript code on the server.
2. Net core 2.0 sdk and higher, or Microsoft Visual Studio 2017.

Now  .Net framework has no template for a single page SPA application. Of course, we can create an ASP .Net Core MVC application and manually add the necessary files and folders for the Vue application. But it’s much easier to add a vue template and generate an application from the command line.

Open the Windows command prompt. Create a folder in which you plan to create an application and navigate to it in the console using the cd command. Now, at the command prompt, enter the command:

dotnet new - install Microsoft.AspNetCore.SpaTemplates :: *

Next you will see a list of installed templates:

If you did not find Vue among them, then try the installation again.

Now create the application with the command:

dotnet new vue -o FROSVue

You will see the following warning:

Before running this project on the command line, you must restore NPM packages by running "npm install"

Well, in the command line, go to the folder of the created application:

cd FROSVue

And we execute the command:

npm install

After that, the package manager will analyze the package.json file and install the necessary packages.

Open the created project in Visual Studio.

First of all, install the necessary packages in the NuGet manager:

 

Find and install packages - FastReport.OpenSource and FastReport.OpenSource.Web.

To use FastReport in the application, add in one line of code in the Startup.cs file:

public void Configure(IApplicationBuilder app, IHostingEnvironment env)

        {

              …

            app.UseFastReport();

…

        }

Due to the fact that we used the generator of the application, we have in fact a working application with a demo filling of the back-end and front-end.

Now, in the wwwroot directory, create another one - App_Data. In it we will place the report templates and data source for them:

Now let’s turn to programming. Use the existing controller - SampleDataController.cs:

    public class SampleDataController : Controller

    {

        private IHostingEnvironment _env;

        public SampleDataController(IHostingEnvironment env)

        {

            _env = env;

        }

 [HttpGet("[action]")]

        public IActionResult DisplayReport(string name)

        {

            var webRoot = _env.WebRootPath;

            WebReport WebReport = new WebReport();

            WebReport.Width = "1000";

            WebReport.Height = "1000";

            WebReport.Report.Load(System.IO.Path.Combine(webRoot, (String.Format("App_Data/{0}.frx", name)))); // Load the report into the WebReport object

            //WebReport.Report.Load(System.IO.Path.Combine(webRoot, "App_Data/Matrix.frx"));

            System.Data.DataSet dataSet = new System.Data.DataSet(); // Create a data source

            dataSet.ReadXml(System.IO.Path.Combine(webRoot, "App_Data/nwind.xml"));  // Open the xml database

            WebReport.Report.RegisterData(dataSet, "NorthWind"); // Registering the data source in the report

            ViewBag.WebReport = WebReport; // pass the report to View

            return View();

        }

}

Add a view for this web method. To do this, in the Views folder, add another one - SampleData. Now back to the controller. Right click on the signature of the DisplayReport method, and select the AddView... item from the context menu:

After clicking the Add button, the view will open for editing. Full presentation code will be:

@await ViewBag.WebReport.Render()

We proceed to programming the client part. In the Client_App folder, we also expand the Components folder. All components are located in separate folders. In each of them there are two files - html template and type script for processing the component logic. Let's create our own new component - report. To do this, create a folder with the same name, and in it generate the file report.vue.html with the following content:

<template>

    <div>

        <div>

            <input type="radio" :id="reportChoice1"

                   name="report" value="Matrix" v-on:click="SetReportName('Matrix')">

            <label :for="reportChoice1">Matrix</label>

            <input type="radio" :id="reportChoice2"

                   name="report" value="Matrix" v-on:click="SetReportName('Master-Detail')">

            <label :for="reportChoice2">Master-Detail</label>

            <input type="radio" :id="reportChoice2"

                   name="report" value="Matrix" v-on:click="SetReportName('Barcode')">

            <label :for="reportChoice2">Barcode</label>

        </div>

        <button v-on:click="Clicked">Show Report</button>

        <div v-if="show">

            <iframe :id="report" height="1000" width="1000" :src="url"></iframe>

        </div>

    </div>

</template>

<script src="./report.ts"></script>

Here we have created three radio buttons with which you can select a report to display. When a button is selected, it executes a click event that calls the function from the script. We will create it later.

Next, we create a regular button that also has a click event handler. It calls the function that will form a link to the method in the controller with the name of the report in the parameter. Well, in the end, we display a frame with a report that will be generated in the DisplayReport view. Although initially this frame is hidden, since the show variable is false. After generating a link to the report, the Clicked function will set the show flag to true, and the frame with the report will be displayed.

Now create a script to work with this template. Let's call it report.ts. This is what it represents:

import Vue from 'vue';

import { Component } from 'vue-property-decorator';

@Component

export default class ReportComponent extends Vue {

    report: string = '';

    url: string = '';

    show: boolean = false;

    Clicked() {

        if (this.report != null) {

        this.show = true;

        this.url = "api/SampleData/DisplayReport?name=" + this.report;

        }

    }

        SetReportName(text:string)

        {

            this.report = text;

        }

 }

This script implements the ReportComponent component. Two functions are involved in this template. The SetReportName function sets the name of the selected report, and Clicked forms the method reference in the controller.

It remains only to embed our component in the application. In the file boot.ts add the link:

const routes = [

…

    { path: '/report', component: require('./components/report/report.vue.html') }

];

And in the file navmenu.vue.html insert another item in the list:

<ul class="nav navbar-nav">

                    …

                    <li>

                        <router-link to="/report">

                            <span class="glyphicon glyphicon-th-list"></span> Report

                        </router-link>

                    </li>

</ul>

That's all. Run the application:

Go to the Report tab:

Now select one of the three reports and click the Show Report button:

And we get the selected report. As you can see, the implementation of displaying a web report on Vue.js is very simple. You can use FastReport.OpenSource in almost any web application with a backend on .Net Core.