React 리포트 뷰어 가져오기 > 온라인 스터디

본문 바로가기

ActiveReportsJS

온라인 스터디

ReactJS React 리포트 뷰어 가져오기

페이지 정보

작성자 GrapeCity 작성일 21-03-25 11:17 조회 83회 댓글 0건

본문

React 응용 프로그램 만들기

새 React 응용 프로그램을 가장 쉽게 만드는 방법은 Create React App 도구를 사용하는 것입니다. 명령 프롬프트 또는 터미널에서 다음 명령을 실행하여 기본 옵션이 포함된 React 응용 프로그램을 만듭니다. 자세한 내용은 Create React App 사이트에서 시작하기를 참조하십시오.

npm init react-app arjs-react-viewer-app


yarn을 사용하는 경우:

npm init react-app arjs-react-viewer-app


React 응용 프로그램을 만드는 다른 방법은 공식 문서를 참조하십시오.


ActivereportsJS npm 패키지 설치

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

npm install @grapecity/activereports-react @grapecity/activereports


yarn을 사용하는 경우:

yarn add @grapecity/activereports-react @grapecity/activereports


ActiveReportsJS 스타일 가져오기

src\App.css 파일을 열고 내용을 다음 코드로 바꿉니다. 이 코드는 기본 리포트 뷰어 구성 요소 스타일을 가져오며, React 리포트 뷰어 구성 요소를 호스트할 요소의 스타일을 정의합니다.

@import "@grapecity/activereports/styles/ar-js-ui.css";
@import "@grapecity/activereports/styles/ar-js-viewer.css";
​
#viewer-host {
 margin: 0 auto;
 width: 100%;
 height: 100vh;
}


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 React 리포트 뷰어 구성 요소를 응용 프로그램에 추가

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

import React from "react";
import "./App.css";
import { Viewer } from "@grapecity/activereports-react";
​
function App() {
 return (
   <div id="viewer-host">
     <Viewer report={{ Uri: 'report.rdlx-json' }} />
   </div>
);
}
​
export default App;


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

npm start 또는 yarn start 명령을 사용하여 응용 프로그램을 실행합니다. 아래와 같이 오류가 발생하고 명령이 실패하면 node_modules 폴더를 삭제하고 npm install 또는 yarn을 실행하여 필요한 패키지를 모두 다시 설치합니다.

> react-scripts start
​
internal/modules/cjs/loader.js:883
throw err;
^
​
Error: Cannot find module 'react'


응용 프로그램이 시작되면 ActiveReportsJS 뷰어 구성 요소가 페이지에 나타납니다.

뷰어에는 “안녕하세요, ActiveReportsJS 뷰어입니다”라는 텍스트가 표시된 보고서가 나타납니다. 도구 모음의 버튼을 사용하거나 사용 가능한 서식 중 하나로 보고서를 내보내 기본 기능을 테스트할 수 있습니다.


관련 링크

  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@grapecity.com | 전화 : 1670-0583 | 경기도 안양시 동안구 시민대로 230, B-703(관양동, 아크로타워) 그레이프시티(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 Copyright ⓒ 2021 GrapeCity inc.