# ActiveReportsJS 보고서 뷰어 컴포넌트
## Content
이 페이지에서는 ActiveReportsJS 보고서 뷰어 컴포넌트에 대해 자세히 설명합니다. 순수 JavaScript 응용 프로그램에 이 컴포넌트 통합을 위한 간단한 가이드는 [시작하기](/activereportsjs/docs/v2.2/GettingStarted/QuickStart/QuickStart-Vanilla) 자습서를 확인하십시오.
### 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 참조를 사용하는 것입니다. 예를 들어 다음과 같습니다.
```html
```
또는 ActiveReportsJS [다운로드 페이지](https://www.grapecity.com/activereportsjs/download)에서 해당 스크립트 및 스타일을 다운로드할 수 있습니다. 해당 스크립트 및 스타일은 다운로드 패키지의 ```dist``` 및 ```styles``` 폴더에서 각각 찾을 수 있습니다.
마지막으로, [@grapecity/activereports](https://www.npmjs.com/package/@grapecity/activereports/) 패키지는 응용 프로그램의 폴더에 설치할 수 있고 이러한 스크립트는 ```node_modules\@grapecity\activereports\dist\``` 및 ```node_modules\@grapecity\activereports\styles\``` 폴더에서 참조할 수 있습니다.
### ActiveReportsJS 뷰어 컴포넌트 초기화
스크립트 및 스타일이 로드되면 ```ActiveReports.Viewer``` 구성자를 호출하고 호스팅 요소의 CSS 선택기를 구성자로 전달하여 뷰어 컴포넌트를 초기화할 수 있습니다. 예를 들어 다음과 같습니다.
```html
```
```ActiveReports.Viewer```의 인스턴스는 뷰어 모양을 사용자 정의하고, 보고서를 미리 보고, 인쇄하거나 내보내는 데 사용할 수 있는 [메서드 및 속성](@api/classes/reportviewer.viewer.html)을 제공합니다.
### 관련 링크
* [라이브 데모](/activereportsjs/demos/features/viewer-integration/purejs)
* [사용자 정의](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSViewer/Customization)
* [지역화](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSViewer/Localization)
* [인쇄](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSViewer/Print)
* [내보내기](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSViewer/Export)
* [테마](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSViewer/Themes)