Get Started with ActiveReportsJS Vue Report Viewer Component

Create a Vue Application

The easiest and recommended way for creating a new Vue application is to use Vue CLI. Run the following command from the command prompt or terminal to create a Vue 2 application using the default preset. For details, see presets on the Vue CLI site.

vue create -p default arjs-vue-viewer-app

Install ActivereportsJS npm packages

We distribute the Vue Report Viewer Component via @grapecity/activereports-vue npm package. The main @grapecity/activereports package provides the core functionality. To install the most current version of these packages, run the following command from the application's root folder.

npm install @grapecity/activereports-vue @grapecity/activereports

Or if you are using yarn:

yarn add @grapecity/activereports-vue @grapecity/activereports

If you are using Vue 2.0 then install @vue/composition-api package:

npm install @vue/composition-api

Or if you are using yarn:

yarn add @vue/composition-api

Add ActiveReportsJS report to the application

ActiveReportsJS uses JSON format and rdlx-json extension for report template files. In the public folder, create the new file called report.rdlx-json and insert the following JSON content into that file.

{
  "Type": "report",
  "Body": {
    "Name": "Body",
    "Type": "section",
    "ReportItems": [
      {
        "Type": "textbox",
        "Name": "textbox1",
        "Style": { "FontSize": "18pt" },
        "Value": "Hello, ActiveReportsJS Viewer",
        "Height": "10in"
      }
    ]
  },
  "Name": "Report"
}

Add ActiveReportsJS Vue Report Viewer Component to the application

Open the src\App.vue file and replace the default content with the following code. This single file component uses the Vue Report Viewer to display the report template that you added on the previous step. It also imports the default Report Viewer Component Styles and defines style for the viewer's hosting element.

<template>
  <div id="viewer-host">
    <JSViewer v-bind:report="{ Uri: 'report.rdlx-json' }"></JSViewer>
  </div>
</template>

<script>
import { Viewer } from "@grapecity/activereports-vue";

export default {
  name: "App",
  components: {
    JSViewer: Viewer,
  },
};
</script>

<style src="../node_modules/@grapecity/activereports/styles/ar-js-ui.css"></style>
<style src="../node_modules/@grapecity/activereports/styles/ar-js-viewer.css" ></style>

<style>
#viewer-host {
  width: 100%;
  height: 100vh;
}
</style>

Run and test the application

Run the application using npm run serve or yarn serve commands and open the app that runs on the localhost. When the application starts, the ActiveReportsJS Viewer component will appear on the page. The viewer will display the report that shows "Hello, ActiveReportsJS Viewer" text. You can test the basic functionality by using buttons on the toolbar or exporting a report to one of the available formats.