Quotation
A Korean form: amount in words, seal image, embossing, Code128 and QR, a table filled with blank rows.
Report definition (JSON)
{
"name": "견적서",
"page": {
"size": "A4",
"margins": 15
},
"font": {
"family": "Nanum Gothic",
"size": 9
},
"dataSource": "items",
"fillEmptyRows": true,
"emboss": {
"text": "(주)세컨드코리아 · 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": "text",
"x": 25,
"y": 22,
"w": 55,
"h": 7,
"text": "{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": "text",
"x": 25,
"y": 43,
"w": 55,
"h": 7,
"text": "{customer.person}",
"style": {
"border": "0.2 solid #555"
}
},
{
"type": "text",
"x": 0,
"y": 51,
"w": 80,
"h": 7,
"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": "text",
"x": 115,
"y": 22,
"w": 65,
"h": 7,
"text": "{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": "text",
"x": 115,
"y": 29,
"w": 30,
"h": 7,
"text": "{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": "image",
"x": 167,
"y": 26,
"w": 13,
"h": 13,
"src": "data:image/svg+xml;base64,… (954 chars)"
},
{
"type": "text",
"x": 95,
"y": 36,
"w": 20,
"h": 7,
"text": "주 소",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #555"
}
},
{
"type": "text",
"x": 115,
"y": 36,
"w": 65,
"h": 7,
"text": "{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": "text",
"x": 115,
"y": 43,
"w": 65,
"h": 7,
"text": "{supplier.item}",
"style": {
"border": "0.2 solid #555"
}
},
{
"type": "text",
"x": 95,
"y": 50,
"w": 20,
"h": 7,
"text": "전 화",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #555"
}
},
{
"type": "text",
"x": 115,
"y": 50,
"w": 65,
"h": 7,
"text": "{phone(supplier.phone)}",
"style": {
"border": "0.2 solid #555"
}
},
{
"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) * 1.1)} (₩{sum(qty * price) * 1.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": 110,
"y": 80,
"w": 55,
"h": 8,
"text": "유효기간: 견적일로부터 {validDays}일",
"style": {
"align": "right",
"color": "#4a5568",
"fontSize": 8
}
}
]
},
"columnHeader": {
"height": 8,
"elements": [
{
"x": 0,
"y": 0,
"w": 10,
"h": 8,
"type": "text",
"text": "No",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #555"
}
},
{
"x": 10,
"y": 0,
"w": 62,
"h": 8,
"type": "text",
"text": "품목",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #555"
}
},
{
"x": 72,
"y": 0,
"w": 26,
"h": 8,
"type": "text",
"text": "규격",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #555"
}
},
{
"x": 98,
"y": 0,
"w": 12,
"h": 8,
"type": "text",
"text": "단위",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #555"
}
},
{
"x": 110,
"y": 0,
"w": 12,
"h": 8,
"type": "text",
"text": "수량",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #555"
}
},
{
"x": 122,
"y": 0,
"w": 26,
"h": 8,
"type": "text",
"text": "단가",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #555"
}
},
{
"x": 148,
"y": 0,
"w": 32,
"h": 8,
"type": "text",
"text": "공급가액",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #555"
}
}
]
},
"detail": {
"height": 7.5,
"elements": [
{
"x": 0,
"y": 0,
"w": 10,
"h": 7.5,
"type": "field",
"expr": "rowNum",
"style": {
"border": "0.2 solid #555",
"align": "center"
}
},
{
"x": 10,
"y": 0,
"w": 62,
"h": 7.5,
"type": "field",
"expr": "name",
"style": {
"border": "0.2 solid #555"
}
},
{
"x": 72,
"y": 0,
"w": 26,
"h": 7.5,
"type": "field",
"expr": "spec",
"style": {
"border": "0.2 solid #555",
"align": "center",
"fontSize": 8
}
},
{
"x": 98,
"y": 0,
"w": 12,
"h": 7.5,
"type": "field",
"expr": "unit",
"style": {
"border": "0.2 solid #555",
"align": "center"
}
},
{
"x": 110,
"y": 0,
"w": 12,
"h": 7.5,
"type": "field",
"expr": "qty",
"format": "#,##0",
"style": {
"border": "0.2 solid #555",
"align": "right"
}
},
{
"x": 122,
"y": 0,
"w": 26,
"h": 7.5,
"type": "field",
"expr": "price",
"format": "#,##0",
"style": {
"border": "0.2 solid #555",
"align": "right"
}
},
{
"x": 148,
"y": 0,
"w": 32,
"h": 7.5,
"type": "field",
"expr": "qty * price",
"format": "#,##0",
"style": {
"border": "0.2 solid #555",
"align": "right"
}
}
]
},
"summary": {
"height": 50,
"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) * 1.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
}
}
]
}
}
}Data
Long lists show their first three items.
{
"quoteNo": "Q-2026-1015-007",
"date": "2026-10-15",
"validDays": 30,
"customer": {
"name": "(주)한빛물산",
"person": "김민준 과장",
"phone": "0212345678"
},
"supplier": {
"name": "(주)세컨드코리아",
"ceo": "구명석",
"bizNo": "7928703276",
"address": "경기도 파주시 와석순환로 507, 701호",
"phone": "07077681326",
"item": "소프트웨어 개발 및 공급"
},
"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
},
"… 5 items"
],
"note": "납품: 계약 후 2주 이내 · 결제: 납품 후 30일 이내 현금 · 부가세 별도"
}Code for this demo
import { quoteData } from '../../samples/data';
import { quoteReport } from '../../samples/reports';
import { mountViewer, toggle, tr, type DemoContext } from '../ui';
/** 견적서: amount in words, a seal image, an emboss mark, Code128 and QR, blank rows filling the table. */
export const definition = quoteReport();
export const sampleData = quoteData;
export default function mount(ctx: DemoContext) {
const viewer = mountViewer(ctx, { definition, data: sampleData, fileName: `견적서_${quoteData.quoteNo}` });
// fillEmptyRows draws blank rows down to the summary, the way paper forms look
toggle(ctx, tr(ctx.lang, { en: 'Fill with blank rows', ko: '빈 행 채우기' }), true, on => {
void viewer.setDefinition({ ...definition, fillEmptyRows: on });
});
toggle(ctx, tr(ctx.lang, { en: 'Emboss mark', ko: '엠보싱' }), true, on => {
void viewer.setDefinition({ ...viewer.report.definition, emboss: on ? definition.emboss : undefined });
});
}