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. Install localization module
   npm install @grapecity/activereports-localization


           or

   yarn add @grapecity/activereports-localization
  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" language="ja"
            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 '@grapecity/activereports/styles/ar-js-viewer.css';
   import {} from '@grapecity/activereports-localization';
   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


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

Note:
• 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"},


• If you get compile errors with missing dependencies, it may be because of the conflicts between yarn and npm installations -that is, you may be using yarn for creating the application and npm for installing the package. Since Vue-CLI creates yarn.lock, it is suggested to use yarn in all the steps. If you still want to use npm, you need to call 'npm install' after installing the package in order to update reference libraries.

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