보고서 디자인부터 인쇄까지, 브라우저에서.

import { createViewer, createReport } from '@freereportjs/core';
import '@freereportjs/core/styles.css';

// a report definition is plain JSON (made in the designer or by hand)
const definition = await fetch('/reports/sales.json').then(r => r.json());

const viewer = createViewer(document.getElementById('viewer'), {
  definition,
  data: { rows },            // detail rows plus any other values
  params: { from: '2026-07-01' },
  lang: 'ko',
  onOutput: e => log(e),     // every print and export; return false to cancel
});

// without a viewer: straight to PDF or Excel
const report = createReport(definition, { rows });
await report.ready();
const pdf = await report.toPdf();       // Blob
const xlsx = await report.toXlsx('form');

// 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>