        [{"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"}]}]

ActiveReportJS 뷰어 테마

기본 제공 테마

ActiveReportsJS 다운로드 패키지, CDN 배포 및 @mescius/activereportsjs npm 패키지에는 ActiveReportsJS 뷰어 컴포넌트의 모양을 설정하는 데 사용되는 다음 CSS 파일이 포함되어 있습니다.

ar-js-ui.css: 뷰어와 디자이너 컴포넌트에 모두 사용되는 공통 스타일.
ar-js-viewer.css: 뷰어 컴포넌트에 특정한 스타일, 여러 가지 미리 정의된 테마를 포함합니다:
- System
- Default
- DefaultDark
- DarkOled
- HighContrast
- HighContrastDark
- ActiveReports
- ActiveReportsDark

<link> 태그를 통해 ActiveReportsJS 보고서 뷰어를 호스팅하는 하나의 페이지나 컴포넌트에 이러한 스타일을 첨부할 수 있습니다.

<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-viewer.css"
  type="text/css"
/>

또는 응용 프로그램에서 지원되는 경우, CSS 로더를 통하여 이러한 스타일을 포함할 수 있습니다.

import "@mescius/activereportsjs/styles/ar-js-ui.css";
import "@mescius/activereportsjs/styles/ar-js-viewer.css";

뷰어 컴포넌트 테마 설정

순수 자바스크립트

순수 자바스크립트 응용 프로그램에서 뷰어 컴포넌트 테마를 설정하기 위하여, 컴포넌트 생성자에 전달된 configuration 객체 또는 컴포넌트 인스턴스의 theme 속성을 사용합니다.

var viewer = new MESCIUS.ActiveReportsJS.ReportViewer.Viewer("#viewer-host", {theme: 'ActiveReports'});
// or:
viewer.theme = 'ActiveReports';

React, Angular, Vue, Svelte

React, Angular, Vue, Svelte ActiveReportsJS 보고서 뷰어 컴포넌트에 대하여, 컴포넌트의 theme 속성을 사용합니다. 예시:

import { Viewer as ReportViewer } from "@mescius/activereportsjs-react";

function App() {
  return (
    <div className="App">
        <ReportViewer theme="ActiveReports" />
    </div>
  );
}