[{"id":"d0f3199c-ffe7-40df-879b-a8a764bca787","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"50416db6-897f-4c9c-b30b-ed716fdd5b72","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"48cfc0ec-0dd2-4678-925f-405106d02111","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"8c0bb080-08fe-4bec-b298-49fa5b3a6fe7","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"1ec6eaf9-c6e5-4100-967f-4c0e2e960f06","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"b26eb997-dc0c-44b7-9474-d35457467003","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"524e4b1b-8eab-4072-b883-4deac3b01cb2","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"9d7810c2-8414-4a5e-828a-78a540b16185","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"8dcc8883-e0a7-4eb3-a71d-a1bd98d87c3d","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"4f6362aa-713f-4b7d-aade-cb070a09d6bd","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"9d592a12-5c73-4de3-b90c-57b1068b97a3","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"ffa36b62-7b10-4c1a-ac58-5d5650464364","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"73ceaeee-c0a3-450d-a154-e48af35eff2e","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"5f172525-039e-487e-9623-5c36db890ef3","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"b404bfd7-e4f4-48f2-84bd-17efac79f701","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"e2219242-2907-44e2-84e8-41ba89c0d27c","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"7a28f14e-74a4-4c70-b23b-5f2cf009d038","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"75ab7a8e-d98c-485a-ab1d-9c2df4655cab","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"1eb7b181-1afc-4d87-a09e-ebaaee7fe824","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"28fbec9d-64cc-4602-b912-1458787c3eff","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"7201e312-2fd5-4d6f-a432-fe2f957acf7c","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"4678407e-cc4d-42c8-b337-5fe7d5b29b81","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"98f1d25f-1756-455d-8293-6fe94beb2925","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]}]
이 페이지에서는 ActiveReportsJS React 보고서 디자이너에 대해 자세히 살펴봅니다. 디자이너 컴포넌트를 React 응용 프로그램으로 통합하는 간단한 가이드는 시작하기 자습서를 확인할 수 있습니다.
@grapecity/activereports-react npm 패키지를 통해 ActiveReportsJS React 보고서 디자이너 컴포넌트가 포함된 라이브러리를 배포합니다. 기본 @grapecity/activereports 패키지는 핵심 기능을 제공합니다.
ActiveReportsJS React 디자이너 컴포넌트는 JSX(TSX) 파일로 내보내 컴포넌트의 렌더링 트리에 포함할 수 있습니다. 예를 들어 다음과 같습니다.
import { Designer } from "@grapecity/activereports-react";
function App() {
return (
<div>
<Designer />
</div>
);
}
디자이너 컴포넌트는 다음 속성을 허용합니다.
속성 | 유형 | 설명 | ||
---|---|---|---|---|
hotkeysEnabled | boolean | 저장 및 열기 핫키가 사용하도록 설정되어 있는지 여부를 나타냅니다. | ||
language | string | 디자이너 컴포넌트 인터페이스의 언어를 설정합니다. 자세한 내용은 지역화 페이지를 확인하십시오. | ||
fontSet | "default" | "registered" | "all" | 사용 가능한 글꼴 집합을 나타냅니다. 자세한 내용은 글꼴 구성을 참조하십시오. |
dataSources | 데이터 소스 템플릿의 배열 | 미리 정의된 데이터 소스 및 데이터 집합을 설정합니다. | ||
reportList | 보고서 리소스 정보 항목의 배열 | 하위 보고서의 미리 정의된 보고서 이름을 설정합니다. | ||
imageList | 이미지 리소스 정보 항목의 배열 | 이미지 보고서 항목의 미리 정의된 이미지를 설정합니다. | ||
onCreate | onCreate 함수 | 디자이너 도구 모음에 새 보고서 버튼을 추가하고 해당 클릭 처리기를 설정합니다. | ||
onOpen | onOpen 함수 | 디자이너 도구 모음에 보고서 열기 버튼을 추가하고 해당 클릭 처리기를 설정합니다. | ||
onRender | onRender 함수 | 디자이너 도구 모음에 보고서 미리 보기 버튼을 추가하고 해당 클릭 처리기를 설정합니다. | ||
onSave | onSave 함수 | 디자이너 도구 모음에 보고서 저장 버튼을 추가하고 해당 클릭 처리기를 설정합니다. | ||
onSaveAs | onSaveAs 함수 | 디자이너 도구 모음에 다른 이름으로 저장 버튼을 추가하고 해당 클릭 처리기를 설정합니다. | ||
onOpenFileMenu | onOpenFileMenu 함수 | 디자이너 도구 모음에 "파일" 메뉴를 추가하고 해당 클릭 처리기를 설정합니다. | ||
report | 보고서 개체 | 디자이너에서 지정된 보고서를 로드합니다. |
또한 디자이너 컴포넌트에 대한 ref
를 생성하여 부모 컴포넌트에서 디자이너 클래스 인스턴스의 getReport
, setReport
및 processCommand
메서드를 사용할 수 있습니다. 예를 들어 다음과 같습니다.
import { Designer } from "@grapecity/activereports-react";
function App() {
const designerRef = React.createRef();
const btnClick = function () {
designerRef.current.setReport({id: "report.rdlx-json"});
};
return (
<div id="designer-host">
<button type="button" onClick={btnClick}>
Open Report
</button>
<Designer ref={designerRef} />
</div>
);
}