React용 ActiveReportsJS 보고서 뷰어 래퍼:

이 페이지에서는 React용 ActiveReportsJS 보고서 뷰어 래퍼에 대해 자세히 설명합니다. React 응용 프로그램에 래퍼 통합을 위한 간단한 가이드는 시작하기 자습서를 확인하십시오.

ActiveReportsJS React NPM 패키지

@grapecity/activereports-react npm 패키지를 통해 React용 ActiveReportsJS 보고서 뷰어 래퍼 컴포넌트가 포함된 라이브러리를 배포합니다. 기본 @grapecity/activereports 패키지는 핵심 기능을 제공합니다.

ActiveReportsJS React 뷰어 컴포넌트

ActiveReportsJS React 뷰어 컴포넌트는 JSX(TSX) 파일로 내보내 컴포넌트의 렌더링 트리에 포함할 수 있습니다. 예를 들어 다음과 같습니다.

import { Viewer as ReportViewer } from "@grapecity/activereports-react";
function App() {
  return (
    <div>
      <ReportViewer />
    </div>
  );
}

뷰어 컴포넌트는 다음 속성을 허용합니다.

이러한 입력 속성을 동적 값에 바인딩하여 뷰어 컴포넌트의 기본 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>
  );
}

관련 링크

• 라이브 데모
• 보고서 로드
• 사용자 정의
• 지역화
• 인쇄
• 내보내기
• 테마