@grapecity/activereports-vue

ActiveReportsJS Vue Wrapper

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

Usage Example

• Install Vue CLI using following command

npm install -g @vue/cli

• Create new application and navigate to the application folder:

vue create arjs-vue -d
cd arjs-vue

• Add reference to ActiveReportsJS Vue module:

npm install @grapecity/activereports-vue

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

<template>
    <div id="app" style="height: 100vh">
        <GcArViewer ref="control"/>
    </div>
</template>

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

    export default Vue.extend({
        name: 'app',
        components: {
            GcArViewer: Viewer
        },
        mounted(){
            this.getViewer().open({
                    "Name": "Report",
                    "Type": "report",
                    "Width": "9.7215in",
                    "Body": {
                    "Name": "Body",
                    "Type": "section",
                    ReportItems: [
                        { Type: "textbox", Name: "textbox1", Value: "Hello from ActiveReports", Height: "10in" }
                    ]
                    }
            });
        },
        methods: {
            getViewer() {
                return this.$refs.control;
            }
        }
    });
</script>

• Start application

npm run serve

• 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.