        [{"id":"a0e184f5-60ef-4d4e-b394-f8f4edcec114","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"93511b60-fca4-41b8-b020-05e4164ce896","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"4d605a5e-03ea-465a-b508-46e0fdc00bb2","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"7f8bfa0e-4e84-42a7-b266-f57a0b76613d","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"1daa4a64-7a26-4dc4-997d-7a32f854e24e","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"1e8d2a58-6a92-44cd-859c-80fe3cf8b178","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"cefb7847-15cf-4a28-b387-a9f917df4ac2","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"363d0118-e051-4c0d-a8dc-b5accdc2bdd0","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"9af6025a-0aff-4f1c-96a1-ba5963a6e276","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"043663ed-1d7c-4ada-817f-e1fbbbcfd1b0","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"c650c110-7c1d-4741-9f66-2b17c24c246c","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"69ec27be-f154-48cd-9528-900e7213be7b","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"9add3481-4b5f-4dd1-8aa5-9ac0af2dc370","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"9afb798a-3f20-4119-986c-9f0784f7832e","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"8bcc63b0-d3af-4c7b-9c47-a10dbcf069b3","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"af01f907-2b5e-4d37-9762-da184cd81eab","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"5ca5da9d-8fd1-413b-8b1b-a96f170ab7a9","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"82a730d7-f274-4ed2-8ec6-9b8164e6d361","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"34858227-e4e3-46be-8c09-d86ce6655bde","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"e6490625-6787-4a30-a8bb-c6ea7823f52a","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"249eddd5-1fc3-4bbe-881a-01f4362136c4","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"cceb97e0-c2dc-408d-9ef7-855d239ff5a6","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"45a6742e-d26a-4493-b53a-73a4c56b9d7d","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"b8b1497d-23ad-432b-9dfa-04ea67781e23","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"e4ac0ae4-88c1-4f71-9a5d-d226e0a6ffd5","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"5ac1be92-f358-4867-a9ff-7c86977c19aa","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"21dd979a-80f7-4621-afa9-831a991d367d","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"fe1a54f1-ac2e-4f03-a87a-91cbf39c5a0f","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]}]

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.mescius.com/activereportsjs/5.latest/styles/ar-js-ui.css"
  type="text/css"
/>
<link
  rel="stylesheet"
  href="https://cdn.mescius.com/activereportsjs/5.latest/styles/ar-js-designer.css"
  type="text/css"
/>
<script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-core.js"></script>
<script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-designer.js"></script>

또는 ActiveReportsJS 다운로드 페이지에서 해당 스크립트 및 스타일을 다운로드할 수 있습니다. 해당 스크립트 및 스타일은 다운로드 패키지의 dist 및 styles 폴더에서 각각 찾을 수 있습니다.

마지막으로, @mescius/activereportsjs 패키지는 응용 프로그램의 폴더에 설치할 수 있고 이러한 스크립트는 node_modules\@mescius\activereportsjs\dist\ 및 node_modules\@mescius\activereportsjs\styles\ 폴더에서 참조할 수 있습니다.

ActiveReportsJS 디자이너 컴포넌트 초기화

스크립트와 스타일이 로드되면 MESCIUS.ActiveReportsJS.ReportDesigner.Designer 생성자를 호출하고 호스팅 요소의 CSS 선택기를 생성자로 전달하여 디자이너 컴포넌트를 초기화할 수 있습니다. 예를 들어 다음과 같습니다.

<body>
    <div id="designer-host"></div>
    <script>
        var designer = new MESCIUS.ActiveReportsJS.ReportDesigner.Designer("#designer-host");
    </script>
</body>

보고서 디자이너 인스턴스는 보고서 로드, 저장 및 미리 보기와 관련하여 응용 프로그램의 동작을 설정하는 데 사용할 수 있는 메서드 및 속성을 제공합니다.