V1
V1

ActiveReportsJS in Vue

Following are the prerequisites before you start using ActiveReportsJS in Vue framework.

Prerequisites:

  • Node.js
  • Yarn
  • Vue-CLI - Install the global tool for Vue using command
   npm install -g @vue/cli

      or

   yarn global add -g @vue/cli

The following steps show how to view an existing report in a Vue application.

  1. Create a new Vue CLI application by typing following command in command console
   vue create arjs-vue -d
  1. Make this directory your working directory
   cd arjs-vue
  1. Install the ActiveReportsJS package
   npm install @grapecity/activereports-vue

           or

   yarn add @grapecity/activereports-vue
  1. Place the report you want to view (for example, InvoiceList.rdlx-json) in the 'public' folder of the application.
  2. Save the following module source code in 'src/App.vue':
   <template>
      <div id="app" style="height: 600px">
      <GcArViewer ref="control" v-bind:zoom="reportZoom"
            viewMode="paginated"
            v-bind:availableExports = "['pdf', 'xlsx']"
            v-on:report-loaded="this.onReportLoaded"
            v-on:document-loaded="onDocumentLoaded"
            :report="{ Uri: 'InvoiceList.rdlx-json' }"/>
      </div>
   </template>

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

   export default Vue.extend ({
   name: 'app',
         components: {
            GcArViewer: Viewer
        },
        data: function () {
            return {
                reportZoom: 'FitPage',
            }
        },
        mounted(){
            var htmlBtnIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="24" height="24"><path class="gc-icon-color--text" d="M19 26v2c0 1.1-.9 2-2 2H2c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h10v6c0 1.1.9 2 2 2h5v2H6c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h13zM13 3v6c0 .6.5 1 1 1h5l-6-7zM6 14c-1.1 0-2 .9-2 2v7c0 1.1.9 2 2 2h23c1.1 0 2-.9 2-2v-7c0-1.1-.9-2-2-2H6zm23 8v1h-5v-7h1v6h4zm-15-5v6h1v-6h2v-1h-5v1h2zm-4 2v-3h1v7h-1v-3H7v3H6v-7h1v3h3zm10.5 0L19 16h-1v7h1v-5l1 2h1l1-2v5h1v-7h-1l-1.5 3z" fill-rule="evenodd" clip-rule="evenodd" /></svg>';
            this.getViewer().toolbar().addItem({
                key: '$html-export-btn',
                icon: { type:'svg', content:htmlBtnIcon },
                title: "HTML Export",
                enabled: true,
                action: () => { this.getViewer().export('html', []).then((result) => result.download("Exported_HTML")) }                
            });

           },
         methods: {
           onDocumentLoaded: function (a) { console.log("document loaded", a);
        },
        onReportLoaded: function (arg) { console.log    ("report loaded", arg);
           },
           getViewer() {
           return this.$refs.control;
           }
           }
       });
   </script>
  1. In the command console, type following command to run the application
   npm run serve

           or

   yarn serve

If you get "Unexpected console statement (no-console)" error, turn off the no-console rule for eslint config by modifying the package.json as follows and restarting the application.

   "rules": {"no-console": "off"},

You will get a running application in the browser (localhost:8080).

Refer to the Vue Component topic for more details on using ActiveReportsJS in Vue applications.