Nuxt.js에서 ActiveReportsJS 보고서 디자이너 시작하기

Nuxt.js 는 개발 프로세스 및 최종 애플리케이션을 더 빠르게 만드는 최적화와 함께 애플리케이션에 잘 정의된 구조를 제공하는 Vue 기반 프레임워크입니다. 이 자습서에서는 보고서 디자이너 구성 요소를 사용하여 간단한 보고서를 로드하는 Nuxt.js 애플리케이션을 빌드합니다.

Nuxt.js 애플리케이션 만들기

Nuxt.js 애플리케이션을 만드는 가장 쉬운 방법은 Nuxt App 만들기 도구를 사용하는 것입니다. 명령 프롬프트 또는 터미널에서 다음 명령을 실행하여 Nuxt.js 프로젝트를 생성합니다.

# with npx(included by default with npm v5.2+)
npx nuxi@latest init arjs-nuxtjs-designer-app

# with pnpm
pnpm dlx nuxi@latest init arjs-nuxtjs-designer-app

NPM 패키지 설치

핵심 기능을 포함하는 패키지에 의존하는 NPM 패키지를 통해 Vue Report Designer 컴포넌트를 배포합니다 .

또한 Vue v2.x에서 ActiveReportsJS를 사용하려면 및 패키지가 필요합니다.@grapecity/activereports-vue@grapecity/activereports@vue/composition-api@nuxtjs/composition-api

이러한 패키지의 현재 버전을 설치하려면 애플리케이션의 루트 폴더에서 다음 명령을 실행하십시오.

# with npm
npm i @grapecity/activereports-vue%npm_version% 

# with yarn
yarn add @grapecity/activereports-vue%npm_version%

Nuxt.js 구성

어플리케이션 루트에 alias.js 라는 새 파일을 만들고 다음의 코드를 추가합니다.

import moment from "./node_modules/moment";

export const { fn, min, max, now, utc, unix, months,
  isDate, locale, invalid, duration, isMoment, weekdays,
  parseZone, localeData, isDuration, monthsShort, weekdaysMin,
  defineLocale, updateLocale, locales, weekdaysShort, normalizeUnits,
  relativeTimeRounding, relativeTimeThreshold, calendarFormat, ISO_8601
} = moment;

export default moment;

어플리케이션의 루트 폴더에 있는 nuxt.config.ts 파일을 열고 해당 콘텐츠를 아래의 코드로 바꿉니다.

import path from "path";
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  ssr: false,
  devtools: { enabled: true },
  vite: {
    resolve: {
      alias: [
        {
          find: /^moment$/,
          replacement: path.resolve(__dirname, "./alias.js"),
        },
        {
          find: /^gc-dv$/,
          replacement: path.resolve(
            __dirname,
            "./node_modules/@grapecity/activereports/lib/node_modules/gc-dv.js"
          ),
        },
        {
          find: /^\@grapecity\/ar-js-pagereport$/,
          replacement: path.resolve(
            __dirname,
            "./node_modules/@grapecity/activereports/lib/node_modules/@grapecity/ar-js-pagereport.js"
          ),
        },
        {
          find: /^barcodejs$/,
          replacement: path.resolve(
            __dirname,
            "./node_modules/@grapecity/activereports/lib/node_modules/barcodejs.js"
          ),
        },
      ],
    },    
  }
})

애플리케이션에 ActiveReportsJS 보고서 추가

ActiveReportsJS는 JSON 형식과 rdlx-json보고서 템플릿 파일의 확장자를 사용합니다. 애플리케이션의 static폴더에서 라는 새 파일을 만들고 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 Report Designer 구성 요소 추가

파일을 열고 pages\index.vue기본 콘텐츠를 다음 코드로 바꿉니다. Vue 보고서 디자이너를 통합하고 이전 단계에서 추가한 보고서 템플릿을 로드합니다. 또한 기본 보고서 디자이너 구성 요소 스타일을 가져오고 디자이너의 호스팅 요소에 대한 스타일을 정의합니다.

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

<script lang="ts">
import Vue from "vue";
import {Designer} from '@grapecity/activereports-vue';

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

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

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

애플리케이션 실행 및 테스트

명령 을 사용하여 응용 프로그램을 실행할 수 있습니다 yarn dev. 기본적으로 프로젝트는 에서 실행됩니다 http://localhost:3000/. 이 URL을 탐색하면 ActiveReportsJS Report Designer이 페이지에 나타납니다. 디자이너는 텍스트를 보여주는 보고서를 표시합니다 Hello, ActiveReportsJS Designer. 보고서 디자이너 사용자 인터페이스를 사용하여 기본 기능을 테스트할 수 있습니다 .