ReactJS React 리포트 뷰어 가져오기
페이지 정보
작성자 GrapeCity
작성일 2021-03-25 11:17 조회 1,344회
댓글 0건
본문
관련링크
새 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 뷰어입니다”라는 텍스트가 표시된 보고서가 나타납니다. 도구 모음의 버튼을 사용하거나 사용 가능한 서식 중 하나로 보고서를 내보내 기본 기능을 테스트할 수 있습니다.
관련 링크
댓글목록
등록된 댓글이 없습니다.
