@grapecity/activereports-vue

ActiveReportsJS Vue Wrapper

This package is a part of the ActiveReportsJS and provides vue wrapper for ARJS Viewer Component

Usage Example

1. Install Vue CLI using following command

npm install -g @vue/cli

2. Create new application and navigate to the application folder:

vue create arjs-vue -d
cd arjs-vue

3. Add reference to ActiveReportsJS Vue module:

npm install @grapecity/activereports-vue

Or if you are using yarn:

yarn add @grapecity/activereports-vue

Note: 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

4. Save the following module source code in src/App.vue:

<template>
    <div id="app" style="height: 100vh">
         <GcArViewer :report="{ Uri: reportTemplate }"></GcArViewer>
    </div>
</template>

<script>
  import { Viewer } from "@grapecity/activereports-vue";
  import "@grapecity/activereports/styles/ar-js-ui.css";
  import "@grapecity/activereports/styles/ar-js-viewer.css";

  export default {
    name: "App",
    components: {
      GcArViewer: Viewer,
    },
    data: function () {
      return {
        reportTemplate: {
          Type: "report",
          Body: {
            Name: "Body",
            Type: "section",
            ReportItems: [
              {
                Type: "textbox",
                Name: "textbox1",
                Style: { FontSize: "18pt" },
                Value: "Hello, ActiveReportsJS Viewer",
                Height: "10in",
              },
            ],
          },
          Name: "Report",
        },
      };
    },
  };
</script>

5. Start application

'npm run serve' or 'yarn serve' command

6. Go to http://localhost:8080/

Documentation

For more information on how to use ActiveReportsJS and available tools, refer to the Documentation or API reference for guidance.