How to Add Web Report Viewer to a Vue application

To add the Bold Reports® JavaScript Report Viewer to a Vue application, create a Vue CLI application, install the @boldreports/javascript-reporting-controls npm package, add a ReportViewer.vue component, and refer jQuery and the Report Viewer scripts and styles.

What do I need before adding the Report Viewer to a Vue application?

Adding the Bold Reports® Report Viewer to a Vue application requires Node JS (version 8.x or 10.x) and NPM (v3.x.x or higher) in your development environment.

Before you add the Bold Reports® Report Viewer to a Vue application, make sure that your development environment includes the following tools.

  • Node JS ( version 8.x or 10.x ).
  • NPM (v3.x.x or higher)

Install the Vue CLI

Vue provides the easiest way to set Vue CLI projects using the Vue CLI tool. To install the CLI application globally to your machine, run the following command in the Command Prompt.

 npm install -g @vue/cli

Create a new Vue application

To create a new Vue application, run the following command in Command Prompt.

 vue create project-name

 E.g : vue create report-viewer-app

The vue create command prompts you for information about features to include in the initial application project. Press Enter to accept the defaults.

Configure Bold Reports® Report Viewer in Vue CLI

To configure the Report Viewer component, change the directory to your application’s root folder.

 cd project-name

 E.g : cd report-viewer-app

Run the following command to install the Bold Reports® packages, which are distributed in npm as @boldreports/javascript-reporting-controls.

 npm install @boldreports/javascript-reporting-controls

Adding Report Viewer component

Create a file named ‘ReportViewer.vue’ inside the src folder for the Report Viewer component, and add the following code:

<template>
  <div id="viewer"></div>
</template>

<script>
import $ from 'jquery';
export default {
  name: 'ReportViewer',
  mounted()
  {
    $("#viewer").boldReportViewer({
         reportServiceUrl:"https://demos.boldreports.com/services/api/ReportViewer",
         reportPath:'~/Resources/docs/sales-order-detail.rdl'
    });
  }
}
</script>

Adding scripts reference

The Bold Reports® Report Viewer needs the ‘window.jQuery’ object to render the Vue components. Create a file named ‘globals.js’ inside the src folder and import jQuery in the ‘globals.js’ file, as in the following code snippet:

import jquery from 'jquery';

window['jQuery'] = jquery;

window['$'] = jquery;

Refer the globals.js file in the main.js file, as in the following code snippet: The Bold Reports® Report Viewer script and style files need to be imported to run the web Report Viewer.

import './globals'
import Vue from 'vue'
import ReportViewer from './ReportViewer.vue'

import '@boldreports/javascript-reporting-controls/Scripts/v2.0/common/bold.reports.common.min';
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/common/bold.reports.widgets.min';
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-viewer.min';
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-designer.min';

Vue.config.productionTip = false

new Vue({
  render:h => h(ReportViewer),
}).$mount('#viewer')

Create a file named ‘style.css’ inside the public folder.

html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
    width: 100%;
    overflow: hidden;
}

ej-sample,
ej-reportdesigner {
    display: block;
    height: inherit;
    width: inherit;
}

.splash {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
}

.message {
    text-align: center;
    font-size: 40px;
    margin-bottom: 20px;
}

.loader {
    margin: auto;
    width: 70px;
    text-align: center;
    position: relative;
}

.loader>div {
    width: 18px;
    height: 18px;
    background-color: black;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.loader .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.loader .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {

    0%,
    80%,
    100% {
        -webkit-transform: scale(0);
    }

    40% {
        -webkit-transform: scale(1);
    }
}

@keyframes sk-bouncedelay {

    0%,
    80%,
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    40% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

Open the ‘public\index.html’ and refer the following scripts in <head> tag.

<link href="style.css" rel="stylesheet">
<link href="https://cdn.boldreports.com/15.1.10/content/v2.0/tailwind-light/bold.report-viewer.min.css"  rel="stylesheet" />
<link href="https://cdn.boldreports.com/15.1.10/content/v2.0/tailwind-light/bold.report-designer.min.css" rel="stylesheet" />
<script src="https://cdn.boldreports.com/15.1.10/scripts/v2.0/common/bold.reports.common.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/v2.0/common/bold.reports.widgets.min.js"></script>

Add the following code in the <body> tag.

<div class="splash">
      <div class="message">Vue.js Reports</div>
      <div class="loader">
          <div class="bounce1"></div>
          <div class="bounce2"></div>
          <div class="bounce3"></div>
      </div>
</div>
<div id="viewer"></div>
<!-- built files will be auto injected -->
<script>
    document.addEventListener('DOMContentLoaded', function () {
        document.getElementsByClassName("splash")[0].style.display = "None";
    });
</script>

How do I run the Vue application with the Report Viewer?

To run the application, run the following command in command prompt.

 npm run serve