ActiveReportsJS 보고서 디자이너 컴포넌트
이 페이지에서는 ActiveReportsJS 보고서 디자이너 컴포넌트에 대해 자세히 살펴봅니다. 순수 JavaScript 응용 프로그램에 이 컴포넌트 통합을 위한 간단한 가이드는 시작하기 자습서를 확인하십시오.
ActiveReportsJS 스크립트 및 스타일
순수 JavaScript 응용 프로그램에서 ActiveReportsJS 디자이너 컴포넌트를 사용하려면 다음 스크립트 및 스타일이 포함되어 있어야 합니다. * ar-js-core.js: 필수, 핵심 기능을 제공합니다. * ar-js-designer.js: 필수, 디자이너 컴포넌트를 제공합니다. * ar-js-ui.css: 필수, ActiveReportsJs 컴포넌트의 공통 스타일을 제공합니다. * ar-js-designer.css: 필수, 디자이너 컴포넌트의 기본 스타일을 제공합니다.
이러한 스크립트를 포함하는 가장 쉬운 방법은 CDN 참조를 사용하는 것입니다. 예를 들어 다음과 같습니다.
<link
rel="stylesheet"
href="https://cdn.grapecity.com/activereportsjs/2.latest/styles/ar-js-ui.css"
type="text/css"
/>
<link
rel="stylesheet"
href="https://cdn.grapecity.com/activereportsjs/2.latest/styles/ar-js-designer.css"
type="text/css"
/>
<script src="https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-core.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-designer.js"></script>
또는 ActiveReportsJS 다운로드 페이지에서 해당 스크립트 및 스타일을 다운로드할 수 있습니다. 해당 스크립트 및 스타일은 다운로드 패키지의 dist 및 styles 폴더에서 각각 찾을 수 있습니다.
마지막으로, @grapecity/activereports 패키지는 응용 프로그램의 폴더에 설치할 수 있고 이러한 스크립트는 node_modules\@grapecity\activereports\dist\ 및 node_modules\@grapecity\activereports\styles\ 폴더에서 참조할 수 있습니다.
ActiveReportsJS 디자이너 컴포넌트 초기화
스크립트와 스타일이 로드되면 GC.ActiveReports.ReportDesigner.Designer 구성자를 호출하고 호스팅 요소의 CSS 선택기를 구성자로 전달하여 디자이너 컴포넌트를 초기화할 수 있습니다. 예를 들어 다음과 같습니다.
<body>
<div id="designer-host"></div>
<script>
var designer = new GC.ActiveReports.ReportDesigner.Designer("#designer-host");
</script>
</body>
보고서 디자이너 인스턴스는 보고서 로드, 저장 및 미리 보기와 관련하여 응용 프로그램의 동작을 설정하는 데 사용할 수 있는 메서드 및 속성을 제공합니다.