Vue 응용 프로그램에서 ActiveReportsJS 보고서 디자이너 컴포넌트 사용

Vue 응용 프로그램 만들기

새 Vue 응용 프로그램을 만드는 가장 쉽고 권장되는 방법은 create-vue 툴을 사용하는 것입니다. 명령 프롬프트나 터미널에서 다음 명령을 실행합니다:

npm create vue@3

TypeScript나 테스트 지원 등의 기능에 대한 몇 가지 질문이 있으며, 아래에서 추천 답변을 확인할 수 있습니다.

✔ Project name: … arjs-vue-designer-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.

ActivereportsJS npm 패키지 설치

@mescius/activereportsjs-vue npm 패키지를 통해 Vue 보고서 디자이너 컴포넌트를 배포합니다. 이 패키지는 핵심 기능을 포함하는 기본 @mescius/activereportsjs 패키지에 의존합니다.

이러한 패키지의 최신 버전을 설치하려면 애플리케이션의 루트 폴더에서 다음 명령을 실행하세요.

npm install @mescius/activereportsjs-vue@latest

yarn을 사용할 경우:

yarn add @mescius/activereportsjs-vue@latest

응용 프로그램에 ActiveReportsJS 보고서 추가

ActiveReportsJS는 보고서 템플릿 파일에 JSON 형식 및 rdlx-json 확장자를 사용합니다. public 폴더에서 report.rdlx-json이라는 새 파일을 만들고 다음 JSON 콘텐츠를 해당 파일에 삽입합니다.

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

응용 프로그램에 Vue 보고서 디자이너 컴포넌트 추가

src\App.vue 파일을 열고 기본 내용을 다음 코드로 바꿉니다. 이 단일 파일 컴포넌트는 Vue 보고서 디자이너를 사용하여 이전 단계에서 추가한 보고서 템플릿을 표시합니다. 또한 기본 보고서 디자이너 컴포넌트 스타일을 가져오고 디자이너 호스팅 요소의 스타일을 정의합니다.

<template>
  <div id="designer-host">
    <JSDesigner v-bind:report="{id: 'report.rdlx-json', displayName: 'my report' }"></JSDesigner>
  </div>
</template>

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

export default {
  name: "App",
  components: {
    JSDesigner: Designer,
  },
};
</script>

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

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

기본 앱 스타일 제거

기본 응용 프로그램 스타일이 보고서 뷰어 레이아웃을 방해하지 않도록 하려면, src\main.ts 파일을 열고 해당 내용을 다음으로 변경하세요.

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

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

응용 프로그램 실행 및 테스트

npm run serve 또는 yarn serve 명령을 사용하여 응용 프로그램을 실행할 수 있습니다. 기본적으로, 프로젝트는 http://localhost:5173/에서 실행됩니다.

응용 프로그램이 시작되면 ActiveReportsJS 디자이너 컴포넌트가 페이지에 나타납니다. 보고서 항목을 추가하고, 속성을 설정하고, 데이터 소스를 생성하는 등을 통해 기본 기능을 테스트할 수 있습니다. 보고서 디자이너 컴포넌트를 사용하는 방법에 대한 더 많은 정보는 개발자 가이드와 온라인 데모에서 확인하실 수 있습니다.