[{"id":"d404d4eb-0b25-4650-be78-033cc4aa3445","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"5f98443c-9d59-4351-81ad-0910eb2535e7","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"57569d12-0bea-4995-9743-1b5efb7dfda6","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"0d50ab1e-81c0-49b2-b8cb-1f50a6f3e12b","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"60452ec3-5f68-4e01-b8f0-22ea893bf4ce","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"938d62d7-9526-479f-9798-31d0f9f58588","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"d778e74c-622b-47d6-b0b1-32e741ee6d1a","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"3103635f-71c9-4a28-8786-45ae6de6a49f","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"61551de1-9a9f-4a08-b71e-49ca882827f5","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"50134b23-c8f4-4c83-8c49-4f7a4d307585","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"712bddae-c316-4524-add9-6dd487152146","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"74546345-b13f-4465-a716-7bc0f9c19730","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"8c3493e9-e62c-45b7-9268-825db731f79b","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"e588ca95-4aba-4e50-a99f-833a98531489","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"50e4fa24-000f-45f0-8f09-9026e40c30ca","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"ebf0ce82-0782-496c-bd66-90f5433e31f2","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"cc378615-c853-4f3e-994b-9a2260cc06a2","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"4a60e156-0f10-43a2-88bc-9d9691f15137","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"0a0c904c-bbb2-4abe-a626-a06200fb57fe","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"0d56fe97-9840-41da-931f-ad23201cd9e2","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"9e4f342b-5dcb-4548-a84c-afe71cf5d736","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"64f01bad-a9ca-47a2-b134-b485adffed2c","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"224e6263-b410-4f17-8822-e19f965c509d","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"c90cdefc-81dd-4d8d-b8fa-ed93585c4b23","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"5d5d62ca-5108-4421-a925-f2c187eb2aeb","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"afb74359-e66d-40e1-a5e2-f7a22468165d","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"cccfa340-c8a6-43ef-b2cd-f9fe44ce22dc","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]}]
        
(Showing Draft Content)

Vite.js(React)에서 ActiveReportsJS 보고서 디자이너 시작하기

Vite.js는 최신 프론트엔드 개발을 위한 빌드 도구입니다. 네이티브 ES 모듈을 활용하여 개발 경험을 개선하고 고도로 최적화된 프로덕션 빌드를 생성합니다. 이 튜토리얼에서는 Vite.js React 애플리케이션에서 ActiveReportsJS 리포트 디자이너 컴포넌트를 사용하는 방법을 보여줍니다.

Vite.js React 응용 프로그램 생성하기

Vite.js React 애플리케이션을 만드는 가장 쉬운 방법은 create-vite 스캐폴딩 도구를 사용하는 것입니다. 명령 프롬프트 또는 터미널에서 다음 명령을 실행하여 기본 옵션이 있는 응용 프로그램을 만듭니다.

# npm 6.x
npm init vite@latest arjs-vite-react-app --template react

# npm 7+, extra double-dash is needed
npm init vite@latest arjs-vite-react-app -- --template react

# yarn
yarn create vite arjs-vite-react-app --template react

ActivereportsJS NPM 패키지 설치

@grapecity/activereports-react NPM 패키지를 통해 React 보고서 디자이너 컴포넌트를 제공합니다.


@grapecity/activereports 패키지는 기본 기능을 포함하고 있습니다.


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

# npm
npm install @grapecity/activereports-react

# yarn
yarn add @grapecity/activereports-react events

Vite.js 구성

Vite.js React 애플리케이션에서 ActiveReportsJS가 작동하도록 하려면 Vite.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;

그런 다음 응용 프로그램의 루트 폴더에 있는 vite.config.js 파일을 열고 내용을 다음과 같이 수정합니다.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";

export default defineConfig({
  plugins: [react()],
  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 스타일 설정


src\App.css 파일을 열고 내용을 다음의 코드로 바꿉니다.

기본 보고서 디자이너 컴포넌트 스타일을 가져오고 React 보고서 디자이너 컴포넌트를 호스팅할 요소의 스타일을 정의합니다.

@import "@grapecity/activereports/styles/ar-js-ui.css";
@import "@grapecity/activereports/styles/ar-js-designer.css";

#designer-host {
  width: 100%;
  height: 100vh;
}


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


ActiveReportsJS는 보고서 템플릿 파일에 JSON 형식rdlx-json 확장자를 사용합니다. 애플리케이션의 루트 폴더에서 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"
      }
    ]
  }
}


응용 프로그램에 React 리포트 디자이너 추가하기


src\App.jsx의 기본 코드를 다음 코드로 바꿉니다.


import React from "react";
import "./App.css";
import { Designer } from "@grapecity/activereports-react";

function App() {
  return (
    <div id="designer-host">
      <Designer report={{ id: 'report.rdlx-json', displayName: "sample report" }} />
    </div>
  );
}

export default App;


응용 프로그램 실행


개발 모드에서 애플리케이션을 실행하려면 애플리케이션의 루트 폴더에서 다음 명령을 실행합니다.


# npm
npm run dev

# yarn
yarn dev

'vite'가 내부 또는 외부 명령, 실행 가능한 프로그램 또는 배치 파일로 인식되지 않는다는 오류와 함께 명령이 실패하면 node_modules 폴더를 삭제하고 npm install 또는 yarn을 실행하여 다시 필요한 모든 패키지를 설치합니다. 그런 다음 npm run dev 또는 yarn dev를 다시 실행합니다.


애플리케이션 구축의 놀라운 성능과 핫 모듈 재로딩 속도에 주목하십시오. ActiveReportsJS 보고서 디자이너는 응용 프로그램의 시작 페이지에 나타나고 보고서 디자인을 표시합니다. 보고서 항목 추가, 속성 설정, 데이터 소스 생성 등을 통해 기본 기능을 테스트할 수 있습니다. 보고서 디자이너 컴포넌트 사용 방법에 대한 자세한 내용은 보고서 디자이너 인터페이스 페이지를 참조하세요.