Frameworks and eGovFrame

// npm i @freereportjs/core @freereportjs/react
import { useRef, useState } from 'react';
import { FreeReportDesigner, FreeReportViewer, type ReportDefinition } from '@freereportjs/react';
import '@freereportjs/core/styles.css';

export function SalesReport({ definition, rows }) {
  const ref = useRef(null);   // { viewer, report }
  return <FreeReportViewer ref={ref} definition={definition} data={{ rows }} lang="ko" style={{ height: 720 }} />;
}

export function SalesDesigner({ initial, rows, save }) {
  const [def, setDef] = useState<ReportDefinition>(initial);
  return <FreeReportDesigner definition={def} data={{ rows }} onChange={setDef} onSave={save} />;
}

<!-- npm i @freereportjs/core @freereportjs/vue -->
<script setup>
import { ref } from 'vue';
import { FreeReportDesigner, FreeReportViewer } from '@freereportjs/vue';
import '@freereportjs/core/styles.css';

const props = defineProps(['initial', 'rows']);
const def = ref(props.initial);
const viewer = ref(null);   // viewer.value.viewer / viewer.value.report
const save = d => fetch('/api/reports/sales', { method: 'PUT', body: JSON.stringify(d) });
</script>

<template>
  <FreeReportViewer ref="viewer" :definition="def" :data="{ rows }" lang="ko" :height="720" />
  <FreeReportDesigner v-model:definition="def" :data="{ rows }" @save="save" />
</template>

<!-- npm i @freereportjs/core @freereportjs/svelte (Svelte 5) -->
<script>
  import { FreeReportDesigner, FreeReportViewer } from '@freereportjs/svelte';
  import '@freereportjs/core/styles.css';

  let { initial, rows, save } = $props();
  let def = $state(initial);
  let viewer;   // viewer.getViewer(), viewer.getReport()
</script>

<FreeReportViewer bind:this={viewer} definition={def} data={{ rows }} lang="ko" style="height: 720px" />
<FreeReportDesigner definition={def} data={{ rows }} onChange={d => (def = d)} onSave={save} />

// npm i @freereportjs/core @freereportjs/angular
// angular.json "styles": ["node_modules/@freereportjs/core/dist/styles.css"]
import { Component } from '@angular/core';
import { FreeReportDesignerComponent, FreeReportViewerComponent } from '@freereportjs/angular';

@Component({
  selector: 'app-sales-report',
  imports: [FreeReportViewerComponent, FreeReportDesignerComponent],
  template: `
    <free-report-viewer [definition]="def" [data]="data" lang="ko" [height]="720" />
    <free-report-designer [(definition)]="def" [data]="data" (save)="save($event)" />`,
})
export class SalesReportComponent {
  def = initialDefinition;
  data = { rows: [] };
  save(def) { /* PUT the JSON to your server */ }
}

<%-- reportView.jsp: the viewer in an eGovFrame (Spring + JSP) page --%>
<link rel="stylesheet" href="<c:url value='/static/freereport/freereport.css'/>">
<div id="viewer" style="height: 760px" data-ctx="${fn:escapeXml(pageContext.request.contextPath)}"></div>
<script src="<c:url value='/static/freereport/freereport.min.js'/>"></script>
<script>
  var ctx = document.getElementById('viewer').dataset.ctx;
  Promise.all([
    fetch(ctx + '/report/def/sales.do').then(function (r) { return r.json(); }),   // report JSON
    fetch(ctx + '/report/data/sales.do').then(function (r) { return r.json(); })   // { rows: [...] } from MyBatis
  ]).then(function (res) {
    FreeReport.createViewer(document.getElementById('viewer'), {
      definition: res[0], data: res[1], lang: 'ko',
      onOutput: function (e) { /* POST to the output log controller */ }
    });
  });
</script>