[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

렌더링 모드

리포트 시트는 다양한 보고서 디자인 및 보기 시나리오를 지원하기 위해 여러 렌더링 모드를 제공합니다.

renderMode API를 사용하여 템플릿 편집 모드와 보고서 미리 보기 모드 간에 전환할 수 있습니다.

렌더링 모드

리포트 시트는 세 가지 렌더링 모드를 지원합니다.

  • 디자인

    템플릿 시트를 표시합니다.

  • 미리 보기

    생성된 보고서를 표시합니다.

    데이터 입력은 이 모드에서만 지원됩니다.

    자세한 내용은 리포트 시트 데이터 입력 지원을 참조하세요.

  • 페이지가 매겨진 미리 보기

    생성된 보고서를 페이지가 매겨진 형태로 표시합니다.

    페이지 매김 설정을 사용자 지정할 수 있습니다.

    자세한 내용은 페이지 매김 설정을 참조하세요.

렌더링 모드 전환

동기 API

다음을 사용하여 렌더링 모드를 동기적으로 전환할 수 있습니다.

reportSheet.renderMode('Design');
reportSheet.renderMode('Preview');
reportSheet.renderMode('PaginatedPreview');

동기 API는 보고서 생성 프로세스를 즉시 완료합니다.

비동기 API

보고서 생성 중 로딩 표시기와 보다 원활한 UI 업데이트를 지원하기 위해 리포트 시트는 비동기 API를 제공합니다.

  • setRenderModeAsync(renderMode)

  • regenerateReportAsync()

  • refreshAsync()

  • loadTemplateAsync(templateJson)

이러한 메서드는 작업이 완전히 완료되면 resolve되는 Promise를 반환합니다.

await reportSheet.setRenderModeAsync('Preview');

SpreadJS v19.2.0부터 사용할 수 있습니다.

보고서 생성 단계

미리 보기 또는 페이지가 매겨진 미리 보기로 전환하면 보고서 생성이 여러 단계에 걸쳐 수행됩니다.

각 단계에서 ReportGenerationStageChanged 이벤트가 발생합니다.

GC.Spread.Sheets.Events.ReportGenerationStageChanged

단계 값

  • 'analyzing-template'

  • 'loading-data'

  • 'generating-report'

페이즈 값

  • 'start'

  • 'end'

이러한 이벤트는 정보 제공용으로만 사용되며 보고서 생성 프로세스에 영향을 줄 수 없습니다.

일반적으로 로딩 표시기나 진행 상황 메시지를 표시하는 데 사용됩니다.

동기 및 비동기 API 모두 ReportGenerationStageChanged를 발생시킵니다.

예제: 로딩 표시기 표시

다음 코드 예제에서는 ReportGenerationStageChanged를 setRenderModeAsync와 함께 사용하여 보고서 생성 중 로딩 메시지를 표시합니다.

spread.bind(
  GC.Spread.Sheets.Events.ReportGenerationStageChanged,
  (sender, args) => {
    const { stage, phase } = args;

    if (phase === "start") {
      switch (stage) {
        case "analyzing-template":
          showLoading("Analyzing template...");
          break;
        case "loading-data":
          showLoading("Loading data...");
          break;
        case "generating-report":
          showLoading("Generating report...");
          break;
      }
    }

    if (phase === "end" && stage === "generating-report") {
      hideLoading();
    }
  }
);

const report = spread.getActiveSheetTab();
await report.setRenderModeAsync('Preview');

function showLoading(text) {
  const el = document.getElementById("loading");
  if (!el) return;
  el.style.display = "block";
  el.textContent = text;
}

function hideLoading() {
  const el = document.getElementById("loading");
  if (!el) return;
  el.style.display = "none";
}

비동기 API를 사용하면 보고서 생성 단계 사이에 브라우저가 DOM을 다시 그릴 시간을 확보할 수 있습니다.