Report Viewer SDK
Schedule Free Demo
Try it Free
Search results
Suggest a FeaturePDF

How to Add Web Report Viewer to a Vue application

This section explains the steps required to Add web Report Viewer to a Vue application.

Prerequisites

Before getting started with the bold report viewer, make sure that your development environment includes the following commands.

  • 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 CLItool. 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 app project. Accept the defaults by pressing the Enter.

Configure Bold 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 commands to install the Bold Reporting packages are distributed in npm as @boldreports/javascript-reporting-controls.

 npm install @boldreports/javascript-reporting-controls

Adding Report Viewer component

Hence create a file named ‘ReportViewer.vue’ inside the src folder

<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

Bold Reports needs ‘window.jQuery’ object to render the Vue components. Hence create a file named ‘globals.js’ inside the src folder and import jQuery in ‘globals.js’ file as like the below code snippet.

import jquery from 'jquery';

window['jQuery'] = jquery;

window['$'] = jquery;

Refer the globals.js file in main.js file as like below code snippet. The Bold Report Viewer script and style files need to be imported, in order 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')

Hence 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/6.3.24/content/v2.0/tailwind-light/bold.report-viewer.min.css"  rel="stylesheet" />
<link href="https://cdn.boldreports.com/6.3.24/content/v2.0/tailwind-light/bold.report-designer.min.css" rel="stylesheet" />
<script src="https://cdn.boldreports.com/6.3.24/scripts/v2.0/common/bold.reports.common.min.js"></script>
<script src="https://cdn.boldreports.com/6.3.24/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>

Run the Application

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

 npm run serve