Transaction statement template
Supplier block with a seal, an item table, the total in Korean words and blank rows to the bottom.
How to use it
- Shape your data like the sample data below; serve it as JSON from your server.
- Load the definition with getTemplate(id), or save the JSON below in your project.
- Change the company name, logo, seal and wording with [Open in the designer], then [Save] the JSON.
- Printing and PDF, Excel and HWPX export are already in the viewer toolbar.
import { getTemplate, createViewer } from '@freereportjs/core';
import '@freereportjs/core/styles.css';
const t = getTemplate('statement'); // a fresh copy each call
createViewer(document.getElementById('report'), {
definition: t.definition,
data: myData, // same structure as the sample data below
});Seals are generated from text in the data; to use a real seal image, set an image on the seal element in the designer. The default fonts are Nanum Gothic and Nanum Myeongjo.
Data structure
| Key | Kind | Fields |
|---|---|---|
docNo | string | TS-2026-1015-031 |
date | string | 2026-10-15 |
supplier | object | name, ceo, bizNo, address, type, item, phone |
buyer | object | name, ceo, bizNo, address, type, item, person, phone |
note | string | 납품 장소: 본사 3층 총무팀 · 검수 후 30일 이내 결제 |
items[] | rows (6) · repeated by the detail band | name, spec, qty, price |
Report definition (JSON)
{
"version": 1,
"name": "거래명세서",
"page": {
"size": "A4",
"margins": 15
},
"font": {
"family": "Nanum Gothic",
"size": 9
},
"dataSource": "items",
"fillEmptyRows": true,
"bands": {
"title": {
"height": 74,
"elements": [
{
"type": "text",
"x": 0,
"y": 0,
"w": 180,
"h": 13,
"text": "거 래 명 세 서",
"style": {
"fontSize": 22,
"bold": true,
"align": "center",
"letterSpacing": 2
}
},
{
"type": "text",
"x": 0,
"y": 13,
"w": 180,
"h": 5,
"text": "(공급받는자 보관용)",
"style": {
"fontSize": 8,
"align": "center",
"color": "#555"
}
},
{
"type": "text",
"x": 0,
"y": 22,
"w": 22,
"h": 7,
"text": "거래일자",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #555"
}
},
{
"type": "text",
"x": 22,
"y": 22,
"w": 60,
"h": 7,
"text": "{format(date, \"yyyy년 M월 d일\")}",
"style": {
"border": "0.2 solid #555"
}
},
{
"type": "text",
"x": 0,
"y": 29,
"w": 22,
"h": 7,
"text": "거래번호",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #555"
}
},
{
"type": "field",
"x": 22,
"y": 29,
"w": 60,
"h": 7,
"expr": "docNo",
"style": {
"border": "0.2 solid #555"
}
},
{
"type": "text",
"x": 0,
"y": 36,
"w": 22,
"h": 7,
"text": "받 는 분",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #555"
}
},
{
"type": "text",
"x": 22,
"y": 36,
"w": 60,
"h": 7,
"text": "{buyer.name} 귀하",
"style": {
"border": "0.2 solid #555",
"bold": true
}
},
{
"type": "text",
"x": 0,
"y": 43,
"w": 22,
"h": 7,
"text": "연 락 처",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #555"
}
},
{
"type": "field",
"x": 22,
"y": 43,
"w": 60,
"h": 7,
"expr": "phone(buyer.phone)",
"style": {
"border": "0.2 solid #555"
}
},
{
"type": "text",
"x": 0,
"y": 51,
"w": 82,
"h": 6,
"text": "아래와 같이 거래합니다.",
"style": {
"padding": 0.5
}
},
{
"type": "text",
"x": 86,
"y": 22,
"w": 9,
"h": 35,
"text": "공\n급\n자",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #555",
"lineHeight": 1.6
}
},
{
"type": "text",
"x": 95,
"y": 22,
"w": 20,
"h": 7,
"text": "등록번호",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #555"
}
},
{
"type": "field",
"x": 115,
"y": 22,
"w": 65,
"h": 7,
"expr": "bizNo(supplier.bizNo)",
"style": {
"border": "0.2 solid #555",
"align": "center",
"bold": true,
"letterSpacing": 0.4
}
},
{
"type": "text",
"x": 95,
"y": 29,
"w": 20,
"h": 7,
"text": "상 호",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #555"
}
},
{
"type": "field",
"x": 115,
"y": 29,
"w": 30,
"h": 7,
"expr": "supplier.name",
"style": {
"border": "0.2 solid #555"
}
},
{
"type": "text",
"x": 145,
"y": 29,
"w": 12,
"h": 7,
"text": "대표",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #555"
}
},
{
"type": "text",
"x": 157,
"y": 29,
"w": 23,
"h": 7,
"text": "{supplier.ceo} (인)",
"style": {
"border": "0.2 solid #555"
}
},
{
"type": "text",
"x": 95,
"y": 36,
"w": 20,
"h": 7,
"text": "주 소",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #555"
}
},
{
"type": "field",
"x": 115,
"y": 36,
"w": 65,
"h": 7,
"expr": "supplier.address",
"style": {
"border": "0.2 solid #555",
"fontSize": 8
}
},
{
"type": "text",
"x": 95,
"y": 43,
"w": 20,
"h": 7,
"text": "업 태",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #555"
}
},
{
"type": "field",
"x": 115,
"y": 43,
"w": 25,
"h": 7,
"expr": "supplier.type",
"style": {
"border": "0.2 solid #555",
"fontSize": 8
}
},
{
"type": "text",
"x": 140,
"y": 43,
"w": 12,
"h": 7,
"text": "종목",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #555"
}
},
{
"type": "field",
"x": 152,
"y": 43,
"w": 28,
"h": 7,
"expr": "supplier.item",
"style": {
"border": "0.2 solid #555",
"fontSize": 7.5
}
},
{
"type": "text",
"x": 95,
"y": 50,
"w": 20,
"h": 7,
"text": "전 화",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #555"
}
},
{
"type": "field",
"x": 115,
"y": 50,
"w": 65,
"h": 7,
"expr": "phone(supplier.phone)",
"style": {
"border": "0.2 solid #555"
}
},
{
"type": "seal",
"x": 166,
"y": 25.5,
"w": 14,
"h": 14,
"rotate": -6,
"generate": {
"text": "{supplier.name}",
"centerText": "대표이사인",
"shape": "circle"
},
"style": {
"fontFamily": "Nanum Myeongjo"
}
},
{
"type": "text",
"x": 0,
"y": 61,
"w": 36,
"h": 10,
"text": "합계금액\n(부가세 포함)",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #555",
"fontSize": 8
}
},
{
"type": "text",
"x": 36,
"y": 61,
"w": 144,
"h": 10,
"text": "{koreanAmount(sum(qty * price) + round(sum(qty * price) * 0.1))} (₩{sum(qty * price) + round(sum(qty * price) * 0.1):#,##0})",
"style": {
"border": "0.2 solid #555",
"bold": true,
"fontSize": 11,
"align": "center"
}
}
]
},
"columnHeader": {
"height": 8,
"elements": [
{
"type": "text",
"x": 0,
"y": 0,
"w": 10,
"h": 8,
"text": "No",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #555"
}
},
{
"type": "text",
"x": 10,
"y": 0,
"w": 58,
"h": 8,
"text": "품 목",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #555"
}
},
{
"type": "text",
"x": 68,
"y": 0,
"w": 22,
"h": 8,
"text": "규 격",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #555"
}
},
{
"type": "text",
"x": 90,
"y": 0,
"w": 14,
"h": 8,
"text": "수량",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #555"
}
},
{
"type": "text",
"x": 104,
"y": 0,
"w": 24,
"h": 8,
"text": "단 가",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #555"
}
},
{
"type": "text",
"x": 128,
"y": 0,
"w": 28,
"h": 8,
"text": "공급가액",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #555"
}
},
{
"type": "text",
"x": 156,
"y": 0,
"w": 24,
"h": 8,
"text": "세 액",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #555"
}
}
]
},
"detail": {
"height": 7,
"elements": [
{
"type": "field",
"x": 0,
"y": 0,
"w": 10,
"h": 7,
"expr": "rowNum",
"style": {
"border": "0.2 solid #555",
"align": "center"
}
},
{
"type": "field",
"x": 10,
"y": 0,
"w": 58,
"h": 7,
"expr": "name",
"style": {
"border": "0.2 solid #555"
}
},
{
"type": "field",
"x": 68,
"y": 0,
"w": 22,
"h": 7,
"expr": "spec",
"style": {
"border": "0.2 solid #555",
"align": "center",
"fontSize": 8
}
},
{
"type": "field",
"x": 90,
"y": 0,
"w": 14,
"h": 7,
"expr": "qty",
"format": "#,##0",
"style": {
"border": "0.2 solid #555",
"align": "right"
}
},
{
"type": "field",
"x": 104,
"y": 0,
"w": 24,
"h": 7,
"expr": "price",
"format": "#,##0",
"style": {
"border": "0.2 solid #555",
"align": "right"
}
},
{
"type": "field",
"x": 128,
"y": 0,
"w": 28,
"h": 7,
"expr": "qty * price",
"format": "#,##0",
"style": {
"border": "0.2 solid #555",
"align": "right"
}
},
{
"type": "field",
"x": 156,
"y": 0,
"w": 24,
"h": 7,
"expr": "round(qty * price * 0.1)",
"format": "#,##0",
"style": {
"border": "0.2 solid #555",
"align": "right"
}
}
]
},
"summary": {
"height": 36,
"elements": [
{
"type": "text",
"x": 0,
"y": 0,
"w": 90,
"h": 8,
"text": "합 계",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #555"
}
},
{
"type": "field",
"x": 90,
"y": 0,
"w": 14,
"h": 8,
"expr": "sum(qty)",
"format": "#,##0",
"style": {
"border": "0.2 solid #555",
"align": "right",
"bold": true
}
},
{
"type": "text",
"x": 104,
"y": 0,
"w": 24,
"h": 8,
"text": "",
"style": {
"border": "0.2 solid #555"
}
},
{
"type": "field",
"x": 128,
"y": 0,
"w": 28,
"h": 8,
"expr": "sum(qty * price)",
"format": "#,##0",
"style": {
"border": "0.2 solid #555",
"align": "right",
"bold": true
}
},
{
"type": "field",
"x": 156,
"y": 0,
"w": 24,
"h": 8,
"expr": "round(sum(qty * price) * 0.1)",
"format": "#,##0",
"style": {
"border": "0.2 solid #555",
"align": "right",
"bold": true
}
},
{
"type": "text",
"x": 0,
"y": 10,
"w": 25,
"h": 16,
"text": "비 고",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #555"
}
},
{
"type": "text",
"x": 25,
"y": 10,
"w": 155,
"h": 16,
"text": "{note}",
"style": {
"border": "0.2 solid #555",
"valign": "top",
"padding": 2
}
},
{
"type": "text",
"x": 100,
"y": 29,
"w": 80,
"h": 7,
"text": "인수자 : (인)",
"style": {
"align": "right"
}
}
]
}
}
}Sample data
{
"docNo": "TS-2026-1015-031",
"date": "2026-10-15",
"supplier": {
"name": "(주)세컨드코리아",
"ceo": "구명석",
"bizNo": "7928703276",
"address": "경기도 파주시 와석순환로 507, 701호",
"type": "정보통신업",
"item": "소프트웨어 개발",
"phone": "07077681326"
},
"buyer": {
"name": "(주)한빛물산",
"ceo": "김한빛",
"bizNo": "1248112345",
"address": "서울특별시 중구 세종대로 110, 12층",
"type": "도소매",
"item": "사무용품",
"person": "김민준 과장",
"phone": "0212345678"
},
"note": "납품 장소: 본사 3층 총무팀 · 검수 후 30일 이내 결제",
"items": [
{
"name": "A4 복사용지 (박스)",
"spec": "80g 2500매",
"qty": 20,
"price": 27500
},
{
"name": "토너 카트리지",
"spec": "TN-2480",
"qty": 6,
"price": 89000
},
{
"name": "무선 키보드",
"spec": "K380",
"qty": 10,
"price": 59000
},
{
"name": "무선 마우스",
"spec": "M330",
"qty": 10,
"price": 32000
},
{
"name": "27형 모니터",
"spec": "QHD",
"qty": 4,
"price": 349000
},
{
"name": "USB-C 허브",
"spec": "7in1",
"qty": 8,
"price": 45000
}
]
}