Vue Component

• Supports Vue version 2.0.0 or higher.

The ActiveReportsJS Viewer component for Vue allows you to use the viewer in Vue templates markup. An ActiveReportsJS Viewer component for vue is a wrapper for the ActiveReportsJS Viewer control it represents. The ActiveReportsJS Viewer component creates the viewer control behind the scenes, and provides a reference to the control instance, along with providing options to configure the control and events declaratively in the Vue template markup.

ActiveReportsJS Viewer component for Vue is shipped as a separate NPM package. The latest version of the package can be installed from NPM by executing the following command from NodeJS command prompt:

npm install @grapecity/activereports-vue

See this topic for more details about ActiveReportsJS NPM packages.

After that you can import Vue component using ESM import statements. For example, this import statement imports the ActiveReportsJS Viewer component for Vue:

import { Viewer } from '@grapecity/activereports-vue';

Import ActiveReportsJS Viewer component for Vue

With this setup, you can import ActiveReportsJS Viewer Vue module and use the component it provides. For example, this code adds a ActiveReportsJS Viewer component to App component's JSX:

<template>
  <div id="app" style="height: 600px">
    <GcArViewer ref="control" 
	        v-bind:zoom="reportZoom"
			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 { Viewer} from '@grapecity/activereports-vue';
import '@grapecity/activereports';

export default Vue.extend ({
name: 'app',
        components: {
            GcArViewer: Viewer
        },
		data: function () {
			return {
				reportZoom: 'FitPage',
			}
		},
        methods: {
		onDocumentLoaded: function (a) { console.log("document loaded", a); // event binding
		},
		onReportLoaded: function (arg) { console.log("report loaded", arg); // event binding
		},
        getViewer() {
        return this.$refs.control;
        }
        }
    });
</script>

Note that ActiveReportsJS Viewer component for Vue is registered globally, so you don't need to import any specific class or variable from the @grapecity/activereports-vue package. Because of this, you can use an import statement without a from clause. It is enough to import the Vue module only once, somewhere in the root module of your Single Page Application. It is also acceptable to import this module multiple times.

Create ActiveReportsJS Viewer control in code

ActiveReportsJS Viewer component for Vue is intended to be used in Vue template markup. If you want to create its control in code, you should use the control from '@grapecity/activereports' module, instead of '@grapecity/activereports-vue'. Note that the module has the same name as a corresponding Vue interop module, but without the "-vue" word in the name. The following code creates a ActiveReportsJS Viewer control in code:

import { Viewer } from '@grapecity/activereports';
var v = new Viewer.Viewer('#ARJSviewerDiv');