ReactJS React 리포트 뷰어 가져오기
페이지 정보
작성자 GrapeCity
본문
관련링크
새 React 응용 프로그램을 가장 쉽게 만드는 방법은 도구를 사용하는 것입니다. 명령 프롬프트 또는 터미널에서 다음 명령을 실행하여 기본 옵션이 포함된 React 응용 프로그램을 만듭니다. 자세한 내용은 사이트에서 를 참조하십시오.
npm init react-app arjs-react-viewer-app
yarn을 사용하는 경우:
npm init react-app arjs-react-viewer-app
React 응용 프로그램을 만드는 다른 방법은 를 참조하십시오.
ActivereportsJS npm 패키지 설치
React 보고서 뷰어 구성 요소는 npm 패키지를 통해 배포됩니다. 기본 패키지는 핵심 기능을 제공합니다. 이 패키지의 최신 버전을 설치하려면 응용 프로그램의 루트 폴더에서 다음 명령을 실행합니다.
npm install @grapecity/activereports-react @grapecity/activereports
yarn을 사용하는 경우:
yarn add @grapecity/activereports-react @grapecity/activereports
ActiveReportsJS 스타일 가져오기
src\App.css
파일을 열고 내용을 다음 코드로 바꿉니다. 이 코드는 기본 을 가져오며, 를 호스트할 요소의 스타일을 정의합니다.
@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는 보고서 템플릿 파일에 및 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 뷰어입니다”라는 텍스트가 표시된 보고서가 나타납니다. 도구 모음의 버튼을 사용하거나 사용 가능한 서식 중 하나로 보고서를 내보내 기본 기능을 테스트할 수 있습니다.
관련 링크
댓글목록
등록된 댓글이 없습니다.