ActiveReportsJS 보고서 뷰어 Vue 컴포넌트 시작하기

npm create vue@3

✔ Project name: … arjs-vue-viewer-app
✔ Add TypeScript? … Yes
✔ Add JSX Support? … Yes
✔ Add Vue Router for Single Page Application development? … No
✔ Add Pinia for state management? … No
✔ Add Vitest for Unit testing? … No
✔ Add Cypress for both Unit and End-to-End testing? … No
✔ Add ESLint for code quality? … Yes
✔ Add Prettier for code formatting? … No

Scaffolding project in .arjs-vue-viewer-app...
Done.

npm install @mescius/activereportsjs-vue@latest

yarn add @mescius/activereportsjs-vue@latest

{
  "Name": "Report",
  "Body": {
    "ReportItems": [
      {
        "Type": "textbox",
        "Name": "TextBox1",
        "Value": "Hello, ActiveReportsJS Viewer",
        "Style": {
          "FontSize": "18pt"
        },
        "Width": "8.5in",
        "Height": "0.5in"
      }
    ]
  }
}

<template>
  <div id="viewer-host">
    <JSViewer v-bind:report="{ Uri: 'report.rdlx-json' }"></JSViewer>
  </div>
</template>

<script lang="ts">
import { Viewer } from "@mescius/activereportsjs-vue";

export default {
  name: "App",
  components: {
    JSViewer: Viewer,
  },
};
</script>

<style src="../node_modules/@mescius/activereportsjs/styles/ar-js-ui.css"></style>
<style src="../node_modules/@mescius/activereportsjs/styles/ar-js-viewer.css"></style>

<style>
#viewer-host {
  width: 100%;
  height: 100vh;
}
</style>

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')