# 보고서를 JSON 리소스로 로드

## Content



보고서 템플릿을 서버 측에 유지하고 런타임에 요청 시 가져올 계획이라고 가정합니다. ActiveReportsJS는 보고서 템플릿 파일에 [JSON 형식](https://www.json.org/json-en.html)과 ```rdlx-json``` 확장명을 사용합니다. 따라서 응용 프로그램이 보고서 템플릿을 다른 JSON 리소스처럼 가져올 수 있습니다. 템플릿의 JSON이 전송되면 [viewer.open](@api/classes/reportviewer.viewer.html#open) 메서드에 전달할 수 있습니다. 다음 예제에서는 위에서 설명한 방법을 사용하는 Angular, React, Vue TypeScript 컴포넌트의 코드를 보여 줍니다. 예제에서 `/reports/Invoice` 요청은 보고서 템플릿 내용을 반환한다고 가정되었습니다. 보고서 뷰어에 보고서를 로드하기 전에 수정하는 방법도 보여 줍니다.

<p>DOC-DETAILS-TAG-OPEN</p>
<p>DOC-SUMMARY-TAG-OPEN</p>
Angular 컴포넌트
<p>DOC-SUMMARY-TAG-CLOSE</p>


```js
import { ViewerComponent } from "@grapecity/activereports-angular";
@Component({
  selector: "app-root",
  template:
    "<gc-activereports-viewer (init)='onViewerInit()'> </gc-activereports-viewer>",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  @ViewChild(ViewerComponent) reportViewer: ViewerComponent;
  onViewerInit() {
    fetch("/reports/Invoice")
      .then((data) => data.json())
      .then((report) => {
        report.Page.PageOrientation = "Landscape";
        this.report.open(report);
      });
  }
}
```
Angular 응용 프로그램에서 ActiveReportsJS 뷰어를 통합하는 방법에 대한 자세한 내용은 [Angular 뷰어 컴포넌트](Angular-Component) 페이지를 참조하십시오.
<p>DOC-DETAILS-TAG-CLOSE</p>

<p>DOC-DETAILS-TAG-OPEN</p>
<p>DOC-SUMMARY-TAG-OPEN</p>
React 컴포넌트
<p>DOC-SUMMARY-TAG-CLOSE</p>


```js
import { Viewer } from "@grapecity/activereports-react";

function App() {
  const viewerRef = React.useRef();

  React.useEffect(() => {
    async function loadReport() {
      await fetch("/reports/Invoice")
        .then((data) => data.json())
        .then((report) => {
          report.Page.PageOrientation = "Landscape";
          viewerRef.current.Viewer.open(report);
        });
    }
    loadReport();
  }, []);
  return (
    <div id="viewer-host">
      <Viewer ref={viewerRef} />
    </div>
  );
}
```

React 응용 프로그램에서 ActiveReportsJS 뷰어를 통합하는 방법에 대한 자세한 내용은 [React 뷰어 컴포넌트](React-Component) 페이지를 참조하십시오.
<p>DOC-DETAILS-TAG-CLOSE</p>

<p>DOC-DETAILS-TAG-OPEN</p>
<p>DOC-SUMMARY-TAG-OPEN</p>
Vue 컴포넌트
<p>DOC-SUMMARY-TAG-CLOSE</p>


```js
import { Viewer as ReportViewer } from "@grapecity/activereports-vue";

new Vue({
  el: "#app",
  components: { "arjs-viewer": ReportViewer },
  template: "<arjs-viewer ref='reportViewer' />",
  mounted() {
    const viewer = this.$refs.reportViewer.Viewer();
    fetch("/reports/Invoice")
      .then((data) => data.json())
      .then((report) => {
        report.Page.PageOrientation = "Landscape";
        viewer.open(report);
      });
  },
});
```

Vue 응용 프로그램에서 ActiveReportsJS 뷰어를 통합하는 방법에 대한 자세한 내용은 [Vue 뷰어 컴포넌트](Vue-Component) 페이지를 참조하십시오.

<p>DOC-DETAILS-TAG-CLOSE</p>

<p>DOC-DETAILS-TAG-OPEN</p>
<p>DOC-SUMMARY-TAG-OPEN</p>
JavaScript 컴포넌트
<p>DOC-SUMMARY-TAG-CLOSE</p>



```js
var viewer = new ActiveReports.Viewer("#viewer-host");
fetch("/reports/Invoice")
  .then((data) => data.json())
  .then((report) => {
    report.Page.PageOrientation = "Landscape";
    viewer.open(report);
  });
```

Pure JavaScript 응용 프로그램에서 ActiveReportsJS 뷰어를 통합하는 방법에 대한 자세한 내용은 [Pure JavaScript 통합](VanillaJS) 페이지를 참조하십시오.

<p>DOC-DETAILS-TAG-CLOSE</p>

전체 코드 예제는 [라이브 데모](/activereportsjs/demos/features/viewer-report-loading)를 참조하십시오.