[{"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"}]}]
데모 도움말 테마 에디터 API
Download
(Showing Draft Content)

ActiveReportsJS 보고서 뷰어 컴포넌트

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

ActiveReportsJS 스크립트 및 스타일

순수 JavaScript 응용 프로그램에서 ActiveReportsJS 뷰어 컴포넌트를 사용하려면 다음 스크립트 및 스타일이 포함되어 있어야 합니다. * ar-js-core.js: 필수 사항, 핵심 기능을 제공합니다. * ar-js-viewer.js: 필수 사항, 뷰어 컴포넌트를 제공합니다. * ar-js-ui.css: 필수 사항, ActiveReportsJs 컴포넌트의 공통 스타일을 제공합니다. * ar-js-viewer.css: 필수 사항, 뷰어 컴포넌트의 기본 스타일을 제공합니다. * ar-js-pdf.js: 선택 사항, PDF로 내보내기 기능을 제공합니다. * ar-js-xlsx.js: 선택 사항, XLS로 내보내기 기능을 제공합니다. * ar-js-html.js : 선택 사항, HTML로 내보내기 기능을 제공합니다.


이러한 스크립트를 포함하는 가장 쉬운 방법은 CDN 참조를 사용하는 것입니다. 예를 들어 다음과 같습니다.

<link
  rel="stylesheet"
  href="https://cdn.grapecity.com/activereportsjs/3.2.0/styles/ar-js-ui.css"
  type="text/css"
/>
<link
  rel="stylesheet"
  href="https://cdn.grapecity.com/activereportsjs/3.2.0/styles/ar-js-viewer.css"
  type="text/css"
/>
<script src="https://cdn.grapecity.com/activereportsjs/3.2.0/dist/ar-js-core.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/3.2.0/dist/ar-js-viewer.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/3.2.0/dist/ar-js-pdf.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/3.2.0/dist/ar-js-xlsx.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/3.2.0/dist/ar-js-html.js"></script>

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


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

ActiveReportsJS 뷰어 컴포넌트 초기화

스크립트 및 스타일이 로드되면 ActiveReports.Viewer 구성자를 호출하고 호스팅 요소의 CSS 선택기를 구성자로 전달하여 뷰어 컴포넌트를 초기화할 수 있습니다. 예를 들어 다음과 같습니다.

<body>
    <div id="viewer-host"></div>
    <script>
        var viewer = new ActiveReports.Viewer("#viewer-host");
    </script>
</body>

ActiveReports.Viewer의 인스턴스는 뷰어 모양을 사용자 정의하고, 보고서를 미리 보고, 인쇄하거나 내보내는 데 사용할 수 있는 메서드 및 속성을 제공합니다.

관련 링크