[{"id":"1acc9c3e-8bdd-4252-8798-4c4daf6db52c","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]},{"id":"985baaf2-5017-40cd-9cc9-b50fdb4b0b6c","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]},{"id":"cda48895-8088-4634-9e44-c92fdfbc024c","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]}]
        
(Showing Draft Content)

ActiveReportsJS Report Viewer Wrapper for Vue

This page provides a detailed overview of ActiveReportsJS Report Viewer Wrapper for Vue. You can check Get Started tutorial for a concise guide for integrating this wrapper to a Vue application.

ActiveReportsJS Vue NPM package

We distribute the library that contains the ActiveReportsJS Report Viewer Wrapper for Vue component via the @grapecity/activereports-vue npm package. The main @grapecity/activereports package provides the core functionality. If you are using Vue 2.0 then ActiveReportsJS also requires @vue/composition-api package to be installed.

ActiveReportsJS Vue Viewer component

ActiveReportsJS Vue Viewer component can be imported from @grapecity/activereports-vue package and included in a parent component's template, for example:

import Vue from "vue";
import { Viewer as ReportViewer } from "@grapecity/activereports-vue";
import "@grapecity/activereports/styles/ar-js-viewer.css";

new Vue({
  el: "#app",
  components: { "arjs-viewer": ReportViewer },
  template: "<div style='width:100%;height: 100vh'><arjs-viewer /></div>",
});

The viewer component accepts the following properties.

Property

Type

Default Value

Description

availableExports

Array of strings


sets the list of exports that should be available in the viewer UI. See Exports page for more information

mouseMode

'Pan' | 'Selection'

'Pan'

sets the mouse mode of Viewer component.

renderMode

'Galley' | 'Paginated'

'Paginated'

sets the render mode of Viewer component

viewMode

'Continuous' | 'SinglePage'

'Continuous'

sets the view mode of Viewer component

zoom

'FitWidth' | 'FitPage' | number

100

sets the zoom mode of Viewer component

fullscreen

boolean

false

indicates whether the Viewer component should display the content in Full-Screen mode

toolbarVisible

boolean

true

indicates whether the toolbar of Viewer component is visible or not

sidebarVisible

boolean

true

indicates whether the sidebar of Viewer component is visible or not

panelsLayout

'sidebar' | 'toolbar'

'toolbar'

indicates the location of Search and Export functions within the UI of Viewer component

parameterPanelLocation

'default' | 'top' | 'bottom'

'default'

indicates the location of the Parameters bar within the UI of Viewer component

toolbarLayout

Object


sets the list of available toolbar items. See Customization page for more information

language

string


sets the language of the UI. See Localization page for more information

exportsSettings

object


sets the export settings. Check the Export Settings page for more information.

report

Object


sets the report to load in the Viewer component.

reportLoaded

(args: ReportLoadEventArgs)=>void


sets the handler for the event that occurs when a report is loaded but before rendering started

documentLoaded

(args: DocumentLoadEventArgs)=>void


sets the handler for the event that occurs when a report rendering is completed

errorHandler

()=> void


sets the handler for the event that occurs if report rendering causes an error

You can bind these input properties to dynamic values to completely overwrite the viewer component's default UI, check Customization page for more information.


Besides, the parent component can access methods and properties of the Viewer Class instance class by creating the ref for a Viewer component and using its Viewer function, for example

import Vue from "vue";
import { Viewer as ReportViewer } from "@grapecity/activereports-vue";
import "@grapecity/activereports/styles/ar-js-viewer.css";

new Vue({
  el: "#app",
  components: { "arjs-viewer": ReportViewer },
  template:
    "<div style='width:100%;height: 100vh'><arjs-viewer ref='reportViewer' /></div>",
  mounted: function () {
    this.$refs.reportViewer.Viewer().toggleFullScreen();
  },
});