Integration to VueJS Application

In This Topic

This page explains how you can embed the ActiveReports WebDesigner component in your VueJS application (ASP.NET Core). We will use Vue and ASP.NET Core with the JavaScript template to create the application.

Open Microsoft Visual Studio 2022 and create a new project, Vue and ASP.NET Core with JavaScript.
Type a name for your project and click Create.
In the Solution Explorer, right-click the '.Server' project and select Manage NuGet Packages.

Add the following packages to the project.


MESCIUS.ActiveReports.Aspnetcore.Designer
MESCIUS.ActiveReports.Aspnetcore.Viewer

Add a new folder called 'resources' in the application's root and place the report you want to display in viewer, in this folder. The report you create in WebDesigner, on saving, is saved at this location.

Update the 'Program.cs' file as follows:

Program.cs	Copy Code
using GrapeCity.ActiveReports.Aspnetcore.Designer; using GrapeCity.ActiveReports.Aspnetcore.Viewer; using GrapeCity.ActiveReports.Web.Designer; var builder = WebApplication.CreateBuilder(args); // Add services to the container. builder.Services.AddReportViewer(); builder.Services.AddReportDesigner(); builder.Services.AddMvc(options => options.EnableEndpointRouting = false); var app = builder.Build(); app.UseHttpsRedirection(); if (!app.Environment.IsDevelopment()) { app.UseDeveloperExceptionPage(); } var ResourcesRootDirectory = new DirectoryInfo(Path.Combine(Directory.GetCurrentDirectory(), "resources")); app.UseReportViewer(config => config.UseFileStore(ResourcesRootDirectory)); app.UseReportDesigner(config => config.UseFileStore(ResourcesRootDirectory, null, FileStoreOptions.NestedFoldersLookup)); app.UseDefaultFiles(); app.UseStaticFiles(); app.Run();

Program.cs

Copy Code

using GrapeCity.ActiveReports.Aspnetcore.Designer;
using GrapeCity.ActiveReports.Aspnetcore.Viewer;
using GrapeCity.ActiveReports.Web.Designer;
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddReportViewer();
builder.Services.AddReportDesigner();
builder.Services.AddMvc(options => options.EnableEndpointRouting = false);
var app = builder.Build();
app.UseHttpsRedirection();
if (!app.Environment.IsDevelopment())
{
    app.UseDeveloperExceptionPage();
}
var ResourcesRootDirectory =
    new DirectoryInfo(Path.Combine(Directory.GetCurrentDirectory(), "resources"));
app.UseReportViewer(config => config.UseFileStore(ResourcesRootDirectory));
app.UseReportDesigner(config => config.UseFileStore(ResourcesRootDirectory, null, FileStoreOptions.NestedFoldersLookup));
app.UseDefaultFiles();
app.UseStaticFiles();
app.Run();

Open the 'package.json' file and add the following packages for ActiveReports' Viewer and Designer under 'Dependencies':
```
"@mescius/activereportsnet-designer": "^18.x.x",
"@mescius/activereportsnet-viewer": "^18.x.x"
```

Add a new 'WebDesigner.vue' file in the src\components folder and add the following code.

WebDesigner.vue	Copy Code
<template> <div id="ar-web-designer"></div> </template> <script> import { arWebDesigner } from '@mescius/activereportsnet-designer'; import { createViewer } from '@mescius/activereportsnet-viewer'; export default { mounted() { let serverUrl = 'https://localhost:7226'; arWebDesigner.create('#ar-web-designer', { rpx: { enabled: true }, appBar: { openButton: { visible: true } }, editor: { showGrid: false }, data: { dataSets: { visible: true, canModify: true }, dataSources: { canModify: true } }, server: { url: serverUrl + '/api' }, preview: { openViewer: (options) => { if (this.viewer) { this.viewer.openReport(options.documentInfo.id); return; } this.viewer = createViewer({ element: '#' + options.element, renderFormat: 'svg', reportService: { url: serverUrl + '/api/reporting', }, reportID: options.documentInfo.id }); } } }); } } </script> <style> #ar-web-designer { height: 100vh; float: right; width: 100%; } </style>

WebDesigner.vue

Copy Code

<template>
    <div id="ar-web-designer"></div>
</template>
<script>
    import { arWebDesigner } from '@mescius/activereportsnet-designer';
    import { createViewer } from '@mescius/activereportsnet-viewer';
    export default {
        mounted() {
            let serverUrl = 'https://localhost:7226';
            arWebDesigner.create('#ar-web-designer', {
                rpx: { enabled: true },      
                appBar: { openButton: { visible: true } },
                editor: { showGrid: false },
                data: { dataSets: { visible: true, canModify: true }, dataSources: { canModify: true } },
                server: {
                    url: serverUrl + '/api'
                },
                preview: {
                    openViewer: (options) => {
                        if (this.viewer) {
                            this.viewer.openReport(options.documentInfo.id);
                            return;
                        }
                        this.viewer = createViewer({
                            element: '#' + options.element,
                            renderFormat: 'svg',
                            reportService: {
                                url: serverUrl + '/api/reporting',
                            },
                            reportID: options.documentInfo.id
                        });
                    }
                }
            });
        }
    }
</script>
<style>
    #ar-web-designer {
        height: 100vh;
        float: right;
        width: 100%;
    }
</style>

Open 'App.vue' inside the src folder and replace its default content with the following code.

App.vue	Copy Code
<template> <div class="main"> <WebDesigner /> </div> </template> <script> import "@mescius/activereportsnet-viewer/dist/jsViewer.min.css"; import "@mescius/activereportsnet-designer/dist/web-designer.css"; import WebDesigner from './components/WebDesigner.vue'; export default { name: 'app', components: { WebDesigner }, methods: { } } </script> <style> .main { width: 100%; overflow-x: hidden } </style>

App.vue

Copy Code

<template>
    <div class="main">
        <WebDesigner />
    </div>
</template>
<script>
    import "@mescius/activereportsnet-viewer/dist/jsViewer.min.css";
    import "@mescius/activereportsnet-designer/dist/web-designer.css";
    import WebDesigner from './components/WebDesigner.vue';
    export default {
        name: 'app',
        components: {
            WebDesigner
        },
        methods: {
        }
    }
</script>
<style>
    .main {
        width: 100%;
        overflow-x: hidden
    }
</style>

To disable browser launch, set the 'launchBrowser' to 'false' in 'launchSettings.json' (in .Server project\Properties).
Press Ctrl + Shift + B to build your project and then press F5 to run it.