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

Vue 응용 프로그램 만들기

새 Vue 응용 프로그램을 가장 쉽게 만들기 위해 권장되는 방법은 Vue CLI를 사용하는 것입니다. 명령 프롬프트 또는 터미널에서 다음 명령을 실행하여 미리 설정된 기본값을 사용해 Vue 2 응용 프로그램을 만듭니다. 자세한 내용은 Vue CLI 사이트에서 미리 설정을 참조하십시오.

vue create -p default arjs-vue-viewer-app

ActivereportsJS npm 패키지 설치

GrapeCity는 @grapecity/activereports-vue npm 패키지를 통해 Vue 보고서 뷰어 컴포넌트를 배포합니다. 기본 @grapecity/activereports 패키지는 핵심 기능을 제공합니다. 이러한 패키지의 최신 버전을 설치하려면 응용 프로그램의 루트 폴더에서 다음 명령을 실행합니다.

npm install @grapecity/activereports-vue @grapecity/activereports

yarn을 사용하는 경우:

yarn add @grapecity/activereports-vue @grapecity/activereports

Vue 2.0을 사용하는 경우 @vue/composition-api 패키지를 설치합니다.

npm install @vue/composition-api

yarn을 사용하는 경우:

yarn add @vue/composition-api

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

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

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

Vue 보고서 뷰어 컴포넌트를 응용 프로그램에 추가

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

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

<script>
import { Viewer } from "@grapecity/activereports-vue";

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

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

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

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

npm run serve 또는 yarn serve 명령을 사용하여 응용 프로그램을 실행하고 localhost에서 실행되는 앱을 엽니다. 응용 프로그램이 시작되면 ActiveReportsJS 뷰어 컴포넌트가 페이지에 나타납니다. 뷰어에는 "안녕하세요, ActiveReportsJS 뷰어입니다"라는 텍스트가 표시된 보고서가 나타납니다. 도구 모음의 버튼을 사용하거나 사용 가능한 서식 중 하나로 보고서를 내보내 기본 기능을 테스트할 수 있습니다.