디자이너

createDesigner로 웹 보고서 디자이너를 넣는 방법: 도구 상자, 필드 목록, 밴드, 속성 창, 미리 보기, JSON 보기, 서버 저장입니다.

createDesigner는 웹 디자이너를 띄웁니다. 도구 상자, 데이터 필드 목록, 밴드, 속성 창, 미리 보기와 JSON 보기, 실행 취소·다시 실행이 들어 있습니다. 필드 목록과 미리 보기에 보일 수 있게 예제 데이터를 넘겨 주세요. 디자이너 열기 (전체 화면)

import { createDesigner } from '@freereportjs/core';
import '@freereportjs/core/styles.css';

const designer = createDesigner(document.getElementById('designer'), {
  definition,               // leave out to start with a blank report
  data: { rows },           // sample data for the field list and the preview
  lang: 'ko',
  onChange: def => localStorage.setItem('draft', JSON.stringify(def)),
  onSave: def => fetch('/api/reports/sales', { method: 'PUT', body: JSON.stringify(def) }),
});
designer.setMode('preview');      // 'design' | 'preview' | 'json'
const json = designer.getDefinition();