# 보고서 내보내기

## Content



### 지원되는 내보내기 방법

ActiveReportsJS에는 보고서를 PDF, XLSX 및 HTML 문서로 내보낼 수 있는 기능이 포함되어 있습니다. 보고서 뷰어 UI에는 사용자가 출력 형식을 선택하고, 내보낸 문서 속성을 설정할 수 있는, 구성 가능한 내보내기 세로 막대가 포함되어 있습니다. 또한 ActiveReportsJS API에서는 뷰어에서 로드하지 않고 보고서를 내보내는 데 사용할 수 있는 메서드를 제공합니다.

### 순수 JavaScript 응용 프로그램에서 보고서 뷰어 내보내기 세로 막대 구성

응용 프로그램에는 해당 내보내기 형식을 내보내기 세로 막대에서 사용할 수 있도록 설정하는 `ar-js-pdf.js`, `ar-js-xlsx.js` 및 `ar-js-html.js` 파일의 코드가 포함되어야 합니다. 이렇게 하려면 CDN에서 호스팅하는 코드에 참조를 추가하는 것이 가장 쉬운 방법입니다. 예를 들어 다음과 같습니다.

```html
<script src="https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-pdf.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-xlsx.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-html.js"></script>
```


런타임에 사용 가능한 내보내기 형식을 구성해야 하는 경우 [availableExports](@api/classes/reportviewer.viewer.html#availableexports) 속성을 사용하여 구성할 수 있습니다. 예를 들어 다음 코드는 보고서 뷰어의 인스턴스를 초기화하고 내보내기 세로 막대에서만 PDF 형식을 허용합니다.

```js
var viewer = new ActiveReports.Viewer("#viewer-host");
viewer.availableExports = ["pdf"];
```

`ActiveReports.Viewer` 구성자의 두 번째 인수는 [ViewerOptions 개체](@api/interfaces/reportviewer.vieweroptions.html)를 수락합니다. 이 개체에는 지원되는 각 내보내기 형식에 대한 설정의 기본값을 미리 설정하는 데 사용할 수 있는 `ExportsSettings` 속성이 있을 수 있습니다. `ExportsSettings` 속성 사용에 대한 자세한 내용은 [내보내기 설정](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSViewer/Export/Export-Settings) 페이지를 참조하십시오. 순수 JavaScript 응용 프로그램에서 ActiveReportsJS 뷰어를 사용하는 방법에 대한 자세한 내용은 [순수 JavaScript 문서](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSViewer/VanillaJS)를 확인하십시오.

### Angular 응용 프로그램에서 보고서 뷰어 내보내기 세로 막대 구성

Angular 응용 프로그램에 ActiveReportsJS 서비스를 사용하는 방법에 대한 자세한 내용은 [Angular 컴포넌트 문서](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSViewer/Angular-Component#activereportjs-export-services)를 참조하십시오. Angular 뷰어 컴포넌트의 `availableExports` 속성을 사용하여 런타임에 사용 가능한 내보내기 형식을 설정하고, `exportsSettings` 속성을 사용하여 내보내기 설정을 미리 설정할 수 있습니다. `exportsSettings` 속성 사용에 대한 자세한 내용은 [내보내기 설정](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSViewer/Export/Export-Settings) 페이지를 참조하십시오.

### React 응용 프로그램에서 보고서 뷰어 내보내기 세로 막대 사용

코드가 `@grapecity/activereports` 패키지에서 임의의 유형을 가져오는 경우 React용 ActiveReportsJS 보고서 뷰어 컴포넌트는 내보내기 세로 막대를 자동으로 사용합니다. React 뷰어 컴포넌트의 `availableExports` 속성을 사용하여 런타임에 사용 가능한 내보내기 형식을 설정하고, `exportsSettings` 속성을 사용하여 내보내기 설정을 미리 설정할 수 있습니다. `exportsSettings` 속성 사용에 대한 자세한 내용은 [내보내기 설정](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSViewer/Export/Export-Settings) 페이지를 참조하십시오. 자세한 내용은 [React 컴포넌트 문서](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSViewer/React-Component)를 참조하십시오.

### Vue 응용 프로그램에서 보고서 뷰어 내보내기 세로 막대 사용

코드가 `@grapecity/activereports` 패키지에서 임의의 유형을 가져오는 경우, Vue용 ActiveReportsJS 보고서 뷰어 컴포넌트는 내보내기 세로 막대를 자동으로 사용합니다. Vue 뷰어 컴포넌트의 `availableExports` 속성을 사용하면 런타임에 사용 가능한 내보내기 형식을 설정할 수 있고, `exportsSettings` 속성을 사용하면 내보내기 설정을 미리 설정할 수 있습니다. `exportsSettings` 속성 사용에 대한 자세한 내용은 [내보내기 설정](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSViewer/Export/Export-Settings) 페이지를 참조하십시오. 자세한 내용은 [Vue 컴포넌트 문서](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSViewer/Vue-Component)를 참조하십시오.

### 뷰어에서 보고서를 로드하지 않고 보고서 내보내기

ActiveReportsJS API를 사용하면 보고서를 뷰어에서 로드하지 않고 지원되는 형식으로 내보낼 수 있습니다. [PdfExport](@api/modules/exports.pdf.html), [HtmlExport](@api/modules/exports.html.html) 및 [XlsxExport](@api/modules/exports.xlsx.html) 유형은 각 형식에 대한 `exportDocument` 메서드를 제공합니다. 다음은 보고서를 로드 및 실행하여 PDF 문서로 내보낸 다음 다운로드하는 코드 예제입니다.

```js
import { Core, PdfExport } from "@grapecity/activereports";

const pdfExportSettings: PdfExport.PdfSettings = {
  title: "Test document",
  author: "GrapeCity",
  keywords: "export, report",
  subject: "Report",
  pdfVersion: "1.4",
};

const report = new Core.PageReport();
await report.load("/reports/text-only.rdlx-json");
const doc = await report.run();
const result = await PdfExport.exportDocument(doc, pdfExportSettings);
result.download("exportedreport.pdf");
```

[내보내기 설정 페이지](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSViewer/Export/Export-Settings)에서 각 내보내기 유형에 대해 지원되는 설정 목록을 확인할 수 있습니다.

### 관련 링크

- [내보내기 설정](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSViewer/Export/Export-Settings)
- [라이브 데모](/activereportsjs/demos/features/viewer-exportsettings/purejs)