[{"id":"a0e184f5-60ef-4d4e-b394-f8f4edcec114","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"93511b60-fca4-41b8-b020-05e4164ce896","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"4d605a5e-03ea-465a-b508-46e0fdc00bb2","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"7f8bfa0e-4e84-42a7-b266-f57a0b76613d","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"1daa4a64-7a26-4dc4-997d-7a32f854e24e","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"1e8d2a58-6a92-44cd-859c-80fe3cf8b178","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"cefb7847-15cf-4a28-b387-a9f917df4ac2","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"363d0118-e051-4c0d-a8dc-b5accdc2bdd0","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"9af6025a-0aff-4f1c-96a1-ba5963a6e276","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"043663ed-1d7c-4ada-817f-e1fbbbcfd1b0","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"c650c110-7c1d-4741-9f66-2b17c24c246c","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"69ec27be-f154-48cd-9528-900e7213be7b","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"9add3481-4b5f-4dd1-8aa5-9ac0af2dc370","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"9afb798a-3f20-4119-986c-9f0784f7832e","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"8bcc63b0-d3af-4c7b-9c47-a10dbcf069b3","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"af01f907-2b5e-4d37-9762-da184cd81eab","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"5ca5da9d-8fd1-413b-8b1b-a96f170ab7a9","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"82a730d7-f274-4ed2-8ec6-9b8164e6d361","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"34858227-e4e3-46be-8c09-d86ce6655bde","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"e6490625-6787-4a30-a8bb-c6ea7823f52a","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"249eddd5-1fc3-4bbe-881a-01f4362136c4","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"cceb97e0-c2dc-408d-9ef7-855d239ff5a6","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"45a6742e-d26a-4493-b53a-73a4c56b9d7d","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"b8b1497d-23ad-432b-9dfa-04ea67781e23","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"e4ac0ae4-88c1-4f71-9a5d-d226e0a6ffd5","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"5ac1be92-f358-4867-a9ff-7c86977c19aa","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"21dd979a-80f7-4621-afa9-831a991d367d","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"fe1a54f1-ac2e-4f03-a87a-91cbf39c5a0f","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]}]
데모 도움말 API
Download
(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 arjs-vite-react-app --template react

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

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

ActivereportsJS 및 종속성 설치

아래 명령어를 사용하여 ActiveReportsJS React 보고서 뷰어 컴포넌트와 종속성을 설치합니다.

#npm
npm install @mescius/activereportsjs-react@latest

#yarn
yarn add @mescius/activereportsjs-react@latest

ActiveReportsJS 스타일 가져오기

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

@import "@mescius/activereportsjs/styles/ar-js-ui.css";
@import "@mescius/activereportsjs/styles/ar-js-viewer.css";

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

응용 프로그램에 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"
      }
    ]
  }
}

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

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

import React from "react";
import "./App.css";
import { Viewer } from "@mescius/activereportsjs-react";

function App() {
  return (
    <div id="viewer-host">
      <Viewer report={{ Uri: 'report.rdlx-json' }} />
    </div>
  );
}

export default App;

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

응용 프로그램을 개발 모드로 실행하려면 응용 프로그램의 루트 폴더에서 다음 명령을 실행합니다.

# npm
npm run dev

#yarn
yarn dev

'vite'가 내부 또는 외부 명령, 실행 가능 프로그램 또는 배치 파일로 인식되지 않았습니다.라는 오류가 발생하고 명령이 실패하는 경우 node_modules 폴더를 삭제하고 npm install 또는 yarn을 실행하여 필요한 모든 패키지를 다시 설치합니다. 그런 다음 npm run dev 또는 yarn dev를 다시 실행합니다. 뛰어난 응용 프로그램 빌드 성능과 핫 모듈 재로드 속도를 확인합니다.

응용 프로그램이 시작되면 ActiveReportsJS 뷰어 컴포넌트가 페이지에 나타납니다. 뷰어에는 Hello, ActiveReportsJS Viewer라는 텍스트가 포함된 보고서가 표시됩니다. 도구 모음의 버튼을 사용하거나 보고서를 사용 가능한 형식 중 하나로 내보내 기본 기능을 테스트할 수 있습니다.