시작하기

npm에서 @freereportjs/core를 설치하거나 CDN으로 불러오고, 스타일시트를 한 번 import한 뒤 createViewer 몇 줄로 보고서를 화면에 띄우는 방법입니다.

FreeReport는 외부 라이브러리가 없는 TypeScript 패키지 하나입니다. 설치하고 스타일시트를 한 번 불러온 뒤, 높이가 있는 요소에 뷰어를 만들면 됩니다.

npm i @freereportjs/core

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

const definition = await fetch('/reports/sales.json').then(r => r.json());

const viewer = createViewer(document.getElementById('viewer'), {
  definition,
  data: { rows },     // detail rows; other keys are usable in expressions
  lang: 'ko',
});
// <div id="viewer" style="height: 720px"></div>

빌드 도구 없이 (CDN)

script 태그로 불러오면 전역 FreeReport 객체가 생깁니다. 운영 환경에서는 v0.9.0처럼 버전을 고정하세요. latest는 항상 최신 버전입니다.

<link rel="stylesheet" href="https://freereport.app/cdn/latest/freereport.css">
<script src="https://freereport.app/cdn/latest/freereport.min.js"></script>
<div id="viewer" style="height: 720px"></div>
<script>
  FreeReport.createViewer(document.getElementById('viewer'), { definition, data: { rows } });
</script>

<link rel="stylesheet" href="https://freereport.app/cdn/v0.9.0/freereport.css">
<script type="module">
  import { createViewer } from 'https://freereport.app/cdn/v0.9.0/freereport.esm.js';
  createViewer(document.getElementById('viewer'), { definition, data: { rows } });
</script>