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
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
- 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>
- Start application
'npm run serve' or 'yarn serve' command
- 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.