[{"id":"67b2b95f-f683-4673-9e3f-044c49b2a7f3","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"acab1450-345b-4d79-a421-187baa24391b","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"75c9ea99-cd27-4e93-ba23-1a432ed2b12f","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"43797034-f596-4394-b1d0-33bc526cfba3","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"0e8c9020-034a-45be-991e-37188b39617b","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"ab34db23-548a-41c6-b58b-517b1187b49c","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"1c11391d-eee8-4d4d-bb79-568bbb017981","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"6f75d947-a185-4b2e-b2ac-59ce51a75059","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"7846cdd1-836b-4043-9f80-8fd82a66c747","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"615b3ec7-a7af-4163-9d5d-92d540416ce8","tags":[{"name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b"}]},{"id":"bb600617-59cf-49b3-a718-9c4372065955","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"4f511fcc-370e-4f45-8ff9-9df6b7d41faf","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"34a7a849-27bc-4bbf-8790-b6fcef7c9247","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"c37d9457-4cf0-43c1-a77f-ccf2baa9920a","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"a7dd7d88-788d-4640-80a8-d5308b2629eb","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]},{"id":"95caf1c9-ae91-4f54-b77c-fe135dea7e4a","tags":[{"name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2","links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be"}]}]
이 페이지에서는 React용 ActiveReportsJS 보고서 뷰어 래퍼에 대해 자세히 설명합니다. React 응용 프로그램에 래퍼 통합을 위한 간단한 가이드는 시작하기 자습서를 확인하십시오.
@grapecity/activereports-react npm 패키지를 통해 React용 ActiveReportsJS 보고서 뷰어 래퍼 컴포넌트가 포함된 라이브러리를 배포합니다. 기본 @grapecity/activereports 패키지는 핵심 기능을 제공합니다.
ActiveReportsJS React 뷰어 컴포넌트는 JSX(TSX) 파일로 내보내 컴포넌트의 렌더링 트리에 포함할 수 있습니다. 예를 들어 다음과 같습니다.
import { Viewer as ReportViewer } from "@grapecity/activereports-react";
function App() {
return (
<div>
<ReportViewer />
</div>
);
}
뷰어 컴포넌트는 다음 속성을 허용합니다.
속성 | 유형 | 기본값 | 설명 |
---|---|---|---|
availableExports | 문자열의 배열 | 뷰어 UI에서 사용할 수 있는 내보내기 목록을 설정합니다. 자세한 내용은 내보내기 페이지를 참조하십시오. | |
mouseMode | 'Pan' | 'Selection' | 'Pan' |
renderMode | 'Galley' | 'Paginated' | 'Paginated' |
viewMode | 'Continuous' | 'SinglePage' | 'Continuous' |
zoom | 'FitWidth' | 'FitPage' | number |
fullscreen | boolean | false | 뷰어 컴포넌트가 콘텐츠를 전체 화면 모드에서 표시해야 하는지 여부를 나타냅니다. |
toolbarVisible | boolean | true | 뷰어 컴포넌트의 도구 모음 표시 여부를 나타냅니다. |
sidebarVisible | boolean | true | 뷰어 컴포넌트의 세로 막대 표시 여부를 나타냅니다. |
panelsLayout | 'sidebar' | 'toolbar' | 'toolbar' |
parameterPanelLocation | 'default' | 'top' | 'bottom' |
toolbarLayout | Object | 사용 가능한 도구 모음 항목의 목록을 설정합니다. 자세한 내용은 사용자 정의 페이지를 참조하십시오. | |
language | string | 뷰어의 UI 언어를 설정합니다. 자세한 내용은 지역화 페이지를 참조하십시오. | |
exportsSettings | object | 내보내기 설정을 지정합니다. 자세한 내용은 내보내기 설정 페이지를 참조하십시오. | |
report | Object | 뷰어 컴포넌트에서 로드할 보고서를 설정합니다. 자세한 내용은 보고서 로드 섹션을 참조하십시오. | |
reportLoaded | (args: ReportLoadEventArgs)=>void | 보고서가 로드되면 렌더링이 시작되기 전에 발생하는 이벤트의 처리기를 설정합니다. | |
documentLoaded | (args: DocumentLoadEventArgs)=>void | 보고서 렌더링이 완료되면 발생하는 이벤트의 처리기를 설정합니다. | |
errorHandler | ()=> void | 보고서 렌더링이 오류를 일으키는 경우 발생하는 이벤트의 처리기를 설정합니다. |
이러한 입력 속성을 동적 값에 바인딩하여 뷰어 컴포넌트의 기본 UI를 완전히 덮어쓸 수 있습니다. 자세한 내용은 사용자 정의 페이지를 참조하십시오.
또한 부모 컴포넌트가 뷰어 컴포넌트에 대한 ref
를 만든 다음 해당 Viewer
속성을 사용하여 뷰어 클래스 인스턴스의 메서드 및 속성에 액세스할 수 있습니다. 예를 들어 다음과 같습니다.
import { Viewer as ReportViewer } from "@grapecity/activereports-react";
function App() {
const viewerRef = React.createRef();
const btnClick = function () {
viewerRef.current.Viewer.toggleFullScreen();
};
return (
<div id="viewer-host">
<button type="button" onClick={btnClick}>
Full Screen
</button>
<ReportViewer ref={viewerRef} />
</div>
);
}
카카오톡 채널 추가를 통해 GrapeCity의 최신 정보를 빠르게 받아 보세요!