Quotation template
Quotation with the amount in Korean words, a seal, embossing, a barcode and a QR code.
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('quote'); // 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 |
|---|---|---|
quoteNo | string | Q-2026-1015-007 |
date | string | 2026-10-15 |
validDays | number | 30 |
supplier | object | name, ceo, bizNo, address, type, item, phone |
customer | object | name, person, phone |
items[] | rows (5) · repeated by the detail band | name, spec, unit, qty, price |
note | string | 납품: 계약 후 2주 이내 · 결제: 납품 후 30일 이내 현금 · 부가 |
Report definition (JSON)
{
"version": 1,
"name": "견적서",
"page": {
"size": "A4",
"margins": 15
},
"font": {
"family": "Nanum Gothic",
"size": 9
},
"dataSource": "items",
"fillEmptyRows": true,
"emboss": {
"text": "{supplier.name} · SECOND KOREA ·",
"centerText": "견적",
"x": 140,
"y": 248,
"w": 34
},
"bands": {
"title": {
"height": 92,
"elements": [
{
"type": "text",
"x": 0,
"y": 0,
"w": 180,
"h": 16,
"text": "견 적 서",
"style": {
"fontSize": 24,
"bold": true,
"align": "center",
"letterSpacing": 2
}
},
{
"type": "line",
"x": 55,
"y": 15,
"w": 70,
"h": 0,
"width": 0.6
},
{
"type": "text",
"x": 0,
"y": 22,
"w": 25,
"h": 7,
"text": "견적번호",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #555"
}
},
{
"type": "field",
"x": 25,
"y": 22,
"w": 55,
"h": 7,
"expr": "quoteNo",
"style": {
"border": "0.2 solid #555"
}
},
{
"type": "text",
"x": 0,
"y": 29,
"w": 25,
"h": 7,
"text": "견 적 일",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #555"
}
},
{
"type": "text",
"x": 25,
"y": 29,
"w": 55,
"h": 7,
"text": "{format(date, \"yyyy년 M월 d일\")}",
"style": {
"border": "0.2 solid #555"
}
},
{
"type": "text",
"x": 0,
"y": 36,
"w": 25,
"h": 7,
"text": "수 신",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #555"
}
},
{
"type": "text",
"x": 25,
"y": 36,
"w": 55,
"h": 7,
"text": "{customer.name} 귀하",
"style": {
"border": "0.2 solid #555",
"bold": true
}
},
{
"type": "text",
"x": 0,
"y": 43,
"w": 25,
"h": 7,
"text": "참 조",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #555"
}
},
{
"type": "field",
"x": 25,
"y": 43,
"w": 55,
"h": 7,
"expr": "customer.person",
"style": {
"border": "0.2 solid #555"
}
},
{
"type": "text",
"x": 0,
"y": 51,
"w": 80,
"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": 62,
"w": 35,
"h": 12,
"text": "합계금액\n(공급가액+세액)",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #555",
"fontSize": 8.5
}
},
{
"type": "text",
"x": 35,
"y": 62,
"w": 145,
"h": 12,
"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",
"fontSize": 12,
"bold": true,
"align": "center"
}
},
{
"type": "barcode",
"x": 0,
"y": 77,
"w": 60,
"h": 12,
"expr": "quoteNo",
"format": "code128"
},
{
"type": "barcode",
"x": 166,
"y": 76,
"w": 14,
"h": 14,
"expr": "\"https://freereport.app/verify/\" + quoteNo",
"format": "qr"
},
{
"type": "text",
"x": 100,
"y": 80,
"w": 64,
"h": 8,
"text": "유효기간: 견적일로부터 {validDays}일",
"style": {
"align": "right",
"color": "#4a5568",
"fontSize": 8
}
}
]
},
"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": 62,
"h": 8,
"text": "품 목",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #555"
}
},
{
"type": "text",
"x": 72,
"y": 0,
"w": 26,
"h": 8,
"text": "규 격",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #555"
}
},
{
"type": "text",
"x": 98,
"y": 0,
"w": 12,
"h": 8,
"text": "단위",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #555"
}
},
{
"type": "text",
"x": 110,
"y": 0,
"w": 12,
"h": 8,
"text": "수량",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #555"
}
},
{
"type": "text",
"x": 122,
"y": 0,
"w": 26,
"h": 8,
"text": "단 가",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #555"
}
},
{
"type": "text",
"x": 148,
"y": 0,
"w": 32,
"h": 8,
"text": "공급가액",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #555"
}
}
]
},
"detail": {
"height": 7.5,
"elements": [
{
"type": "field",
"x": 0,
"y": 0,
"w": 10,
"h": 7.5,
"expr": "rowNum",
"style": {
"border": "0.2 solid #555",
"align": "center"
}
},
{
"type": "field",
"x": 10,
"y": 0,
"w": 62,
"h": 7.5,
"expr": "name",
"style": {
"border": "0.2 solid #555"
}
},
{
"type": "field",
"x": 72,
"y": 0,
"w": 26,
"h": 7.5,
"expr": "spec",
"style": {
"border": "0.2 solid #555",
"align": "center",
"fontSize": 8
}
},
{
"type": "field",
"x": 98,
"y": 0,
"w": 12,
"h": 7.5,
"expr": "unit",
"style": {
"border": "0.2 solid #555",
"align": "center"
}
},
{
"type": "field",
"x": 110,
"y": 0,
"w": 12,
"h": 7.5,
"expr": "qty",
"format": "#,##0",
"style": {
"border": "0.2 solid #555",
"align": "right"
}
},
{
"type": "field",
"x": 122,
"y": 0,
"w": 26,
"h": 7.5,
"expr": "price",
"format": "#,##0",
"style": {
"border": "0.2 solid #555",
"align": "right"
}
},
{
"type": "field",
"x": 148,
"y": 0,
"w": 32,
"h": 7.5,
"expr": "qty * price",
"format": "#,##0",
"style": {
"border": "0.2 solid #555",
"align": "right"
}
}
]
},
"summary": {
"height": 46,
"elements": [
{
"type": "text",
"x": 0,
"y": 0,
"w": 122,
"h": 8,
"text": "공급가액",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #555"
}
},
{
"type": "field",
"x": 122,
"y": 0,
"w": 58,
"h": 8,
"expr": "sum(qty * price)",
"format": "#,##0",
"style": {
"border": "0.2 solid #555",
"align": "right",
"bold": true
}
},
{
"type": "text",
"x": 0,
"y": 8,
"w": 122,
"h": 8,
"text": "부가가치세 (10%)",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #555"
}
},
{
"type": "field",
"x": 122,
"y": 8,
"w": 58,
"h": 8,
"expr": "round(sum(qty * price) * 0.1)",
"format": "#,##0",
"style": {
"border": "0.2 solid #555",
"align": "right"
}
},
{
"type": "text",
"x": 0,
"y": 16,
"w": 122,
"h": 9,
"text": "합 계",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #555",
"fontSize": 10
}
},
{
"type": "field",
"x": 122,
"y": 16,
"w": 58,
"h": 9,
"expr": "sum(qty * price) + round(sum(qty * price) * 0.1)",
"format": "₩#,##0",
"style": {
"border": "0.2 solid #555",
"align": "right",
"bold": true,
"fontSize": 11
}
},
{
"type": "text",
"x": 0,
"y": 28,
"w": 25,
"h": 16,
"text": "비 고",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #555"
}
},
{
"type": "text",
"x": 25,
"y": 28,
"w": 155,
"h": 16,
"text": "{note}",
"style": {
"border": "0.2 solid #555",
"valign": "top",
"padding": 2
}
}
]
}
}
}Sample data
{
"quoteNo": "Q-2026-1015-007",
"date": "2026-10-15",
"validDays": 30,
"supplier": {
"name": "(주)세컨드코리아",
"ceo": "구명석",
"bizNo": "7928703276",
"address": "경기도 파주시 와석순환로 507, 701호",
"type": "정보통신업",
"item": "소프트웨어 개발",
"phone": "07077681326"
},
"customer": {
"name": "(주)한빛물산",
"person": "김민준 과장",
"phone": "0212345678"
},
"items": [
{
"name": "FreeReport 회사 라이선스 (영구)",
"spec": "freereport.app",
"unit": "식",
"qty": 1,
"price": 900000
},
{
"name": "보고서 양식 개발 (견적서·거래명세서)",
"spec": "양식 2종",
"unit": "건",
"qty": 2,
"price": 450000
},
{
"name": "매출 보고서 개발 (그룹·차트)",
"spec": "양식 1종",
"unit": "건",
"qty": 1,
"price": 600000
},
{
"name": "사용자 교육",
"spec": "2시간",
"unit": "회",
"qty": 1,
"price": 200000
},
{
"name": "기술 지원 (1년)",
"spec": "이메일·원격",
"unit": "년",
"qty": 1,
"price": 300000
}
],
"note": "납품: 계약 후 2주 이내 · 결제: 납품 후 30일 이내 현금 · 부가세 별도"
}