# ActiveReportsJS 디자이너에서 보고서 저장

## Content



보고서의 저장소 유형과 ActiveReportsJS 디자이너의 인스턴스에 표시되는 보고서를 저장하는 정확한 방법은 응용 프로그램의 아키텍처에 따라 다릅니다. 이 페이지에서는 여러 가지 일반 시나리오에 대한 사용법을 제공합니다.

### "저장" 및 "다른 이름으로 저장" 버튼 사용

ActiveReportsJS 보고서 디자이너 컴포넌트의 도구 모음에는 "저장" 및 "다른 이름으로 저장" 버튼이 있습니다.

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4ed8c11f-8d09-4226-9c37-dd4595797443/developer-guide/designer-component/save-saveas.png)

그러나 해당 버튼은 사용하도록 설정되어 있지 않아 기본적으로 표시되지 않습니다. 코드는 디자이너 컴포넌트가 이러한 버튼을 허용할 수 있도록 `onSave` 및 `onSaveAs` 작업 처리기를 구성해야 합니다. 자세한 내용은 [작업 처리기](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSDesignerComponent/Action-Handlers) 페이지를 확인하십시오. `onSaveAs` 처리기는 보고서의 `id`와 `displayName` 속성을 포함한 개체로 확인되는 `Promise`를 반환해야 합니다. id는 보고서를 고유하게 식별하고, displayName은 디자이너 컴포넌트의 맨 위 표시줄에 표시됩니다. `onSave` 처리기는 선택적 `displayName` 속성을 포함한 개체로 확인되는 `Promise`를 반환해야 합니다. 다음은 React 응용 프로그램의 메모리 내 저장소에 보고서를 저장하는 `onSave` 및 `onSaveAs` 처리기의 예입니다. 해당 처리기는 `Promise` 개체를 반환하는 `async` 함수이기 때문에 REST API에 요청을 보내 유사한 접근 방식으로 보고서를 저장할 수 있습니다.

```js
import React, { Fragment } from "react";
import { Designer } from "@grapecity/activereports-react";

function App() {
  const counter = React.useRef(0);
  const [reportStorage, setReportStorage] = React.useState(new Map());

  const onSave = function (info) {
    const reportId = info.id || `report${counter.current++}`;
    setReportStorage(new Map(reportStorage.set(reportId, info.definition)));
    return Promise.resolve({ displayName: reportId });
  };

  const onSaveAs = function (info) {
    const reportId = info.id || `report${counter.current++}`;
    setReportStorage(new Map(reportStorage.set(reportId, info.definition)));
    return Promise.resolve({ id: reportId, displayName: reportId });
  };

  return (
    <div id="designer-host">
      <Designer onSave={onSave} onSaveAs={onSaveAs} />
    </div>
  );
}
```

React, Angular, Vue 및 순수 JavaScript 응용 프로그램에 대한 전체 예제는 [라이브 데모](/activereportsjs/demos/features/designer-report-saving)를 참조하십시오.

### Autosave

ActiveReportsJS 보고서 디자이너 컴포넌트 인스턴스의 [processCommand](@api/classes/reportdesigner.designer.html#processcommand) 메서드는 `save,` `saveAs,` `create,` `open` 및 `render` 인수 중 하나를 수락하고 해당하는 작업 처리기를 호출합니다. 자세한 내용은 [작업 처리기](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSDesignerComponent/Action-Handlers) 페이지를 확인하십시오. 디자이너 컴포넌트의 `getReport` 메서드는 마지막 저장 이후 보고서가 변경되었는지 여부를 나타내는 `isDirty` 플래그를 포함하여 현재 보고서의 정보를 반환합니다. 다음 두 가지 메서드를 함께 사용하여 자동 저장 기능을 구현할 수 있습니다. 다음은 Angular 응용 프로그램에서 이 접근 방식을 보여 주는 예로, React, Vue 또는 순수 JavaScript 응용 프로그램에서 동일한 기법을 사용할 수 있습니다.

```javascript
import { AfterViewInit, Component, OnDestroy, ViewChild } from '@angular/core';
import { DesignerComponent } from '@grapecity/activereports-angular';

@Component({
  selector: 'app-root',
  template:
    '<div id="designer-host"><gc-activereports-designer [onSave]="onSave" [onSaveAs]="onSaveAs" > </gc-activereports-designer></div>',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements AfterViewInit, OnDestroy {
  saveIntervalId = null;
  @ViewChild(DesignerComponent, { static: false })
  reportDesigner: DesignerComponent;

  onSave = function (info) {
    // the implementation of the onSave handler
  };
  onSaveAs = function (info) {
    // the implementation of the onSaveAs handler
  };

  ngAfterViewInit(): void {
    this.saveIntervalId = setInterval(async () => {
      const reportInfo = await this.reportDesigner.getReport();
      if (reportInfo?.isDirty) {
        this.reportDesigner.processCommand('save');
      }
    }, 2000);
  }
  ngOnDestroy(): void {
    clearInterval(this.saveIntervalId);
  }
}
```


### 관련 항목

- [라이브 데모](/activereportsjs/demos/features/designer-report-saving)
- [통합](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSDesignerComponent/Integration)
- [작업 처리기](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSDesignerComponent/Action-Handlers)
- [보고서 로드](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSDesignerComponent/Create-New-Report)