보고서 내보내기

지원되는 내보내기 방법

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

순수 JavaScript 응용 프로그램에서 보고서 뷰어 내보내기 사이드바 구성

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

<script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-pdf.js"></script>
<script src="https://cdn.mescius.com/activereportsjs/6.latest/dist/ar-js-xlsxAdv.js"></script>
<script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-tabular-data.js"></script>
<script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-html.js"></script>

런타임에 사용 가능한 내보내기 형식을 구성해야 하는 경우 availableExports 속성을 사용하여 구성할 수 있습니다. 예를 들어 다음 코드는 보고서 뷰어의 인스턴스를 초기화하고 내보내기 사이드바에서만 PDF 형식을 허용합니다.

var viewer = new MESCIUS.ActiveReportsJS.ReportViewer.Viewer("#viewer-host");
viewer.availableExports = ["pdf"];

availableExports 속성에 지원되는 값:

ViewerOptions 객체의 ExportsSettings 속성을 사용하여 기본 내보내기 옵션을 미리 설정할 수도 있습니다. 자세한 내용은 내보내기 설정 페이지를 참조하세요.

순수 JavaScript 애플리케이션에서 ActiveReportsJS를 사용하는 방법에 대한 자세한 내용은 순수 JavaScript 설명서를 참조하세요.

Angular 애플리케이션에서 Export 사이드바 구성하기

Angular 프로젝트에서, Export 서비스를 활성화하는 방법에 대해 Angular Component 문서를 참고하세요.

런타임에서는 다음과 같은 기능을 사용할 수 있습니다:

• availableExports 속성을 사용하여 활성화할 내보내기(Export) 형식 목록을 정의합니다.

• exportsSettings 속성을 사용하여 기본 내보내기 옵션을 설정합니다.

자세한 내용은 Export Settings 페이지를 참고하세요.

React, Svelte, Vue 애플리케이션에서 Export 사이드바 구성하기

React, Svelte, Vue 애플리케이션에서는 @mescius/activereports 패키지의 어떤 타입이라도 가져오면, ActiveReportsJS Report Viewer 컴포넌트가 자동으로 Export 사이드바를 활성화합니다.

런타임에서는 다음 컴포넌트 속성을 사용해 내보내기 동작을 구성할 수 있습니다:

• availableExports — Export 사이드바에서 사용할 수 있는 내보내기 형식을 정의합니다.

• exportsSettings — 각 형식에 대한 기본 내보내기 설정을 지정합니다.

  
  

내보내기 옵션 구성에 대한 자세한 내용은 Export Settings 페이지를 참고하세요.

프레임워크별 설정 지침은 다음을 참조하세요:

• React 컴포넌트 도움말 문서

• Vue 컴포넌트 도움말 문서

• Svelte 컴포넌트 도움말 문서