Vue 리포트 뷰어 가져오기

VueJS Vue 리포트 뷰어 가져오기

추천0

페이지 정보

작성자 GrapeCity

작성일 2021-03-25 11:26 조회 1,244회 댓글 0건

본문

관련링크

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 콘텐츠를 해당 파일에 삽입합니다.

{
 "Type": "report",
 "Body": {
   "Name": "Body",
   "Type": "section",
   "ReportItems": [
    {
       "Type": "textbox",
       "Name": "textbox1",
       "Style": { "FontSize": "18pt" },
       "Value": "Hello, ActiveReportsJS Viewer",
       "Height": "10in"
    }
  ]
},
 "Name": "Report"
}

ActiveReportsJS 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>