청구서 양식
청구 금액(한글), 납부 기한, 입금 계좌와 직인이 있는 대금 청구서.
사용법
- 아래 예제 데이터와 같은 구조로 내 데이터를 만듭니다. 서버에서 JSON으로 내려 주면 됩니다.
- getTemplate(id)로 정의를 불러오거나, 아래 JSON을 내 프로젝트에 저장해서 씁니다.
- 회사 이름·로고·직인·문구는 [디자이너에서 열기]로 바꾼 뒤 [저장]으로 JSON을 받습니다.
- 인쇄, PDF, 엑셀, HWPX 저장은 뷰어 도구 모음에 이미 있습니다.
import { getTemplate, createViewer } from '@freereportjs/core';
import '@freereportjs/core/styles.css';
const t = getTemplate('bill'); // a fresh copy each call
createViewer(document.getElementById('report'), {
definition: t.definition,
data: 내데이터, // 아래 예제 데이터와 같은 구조
});직인은 데이터의 글자로 그려지는 생성 직인입니다. 실제 인감 이미지를 쓰려면 디자이너에서 직인 요소에 이미지를 지정하세요. 글꼴은 나눔고딕·나눔명조가 기본입니다.
데이터 구조
| 키 | 종류 | 필드 |
|---|---|---|
billNo | string | B-2026-10-0042 |
date | string | 2026-10-20 |
dueDate | string | 2026-10-31 |
supplier | 객체 | name, ceo, bizNo, address, type, item, phone |
customer | 객체 | name |
bank | 객체 | name, account, holder |
items[] | 행 배열 (3행) · 상세 밴드가 반복 | name, spec, unit, qty, price |
note | string | 기한 내 입금 부탁드립니다. 계산서는 입금 확인 후 발행됩니다. |
보고서 정의 (JSON)
{
"version": 1,
"name": "청구서",
"page": {
"size": "A4",
"margins": 15
},
"font": {
"family": "Nanum Gothic",
"size": 9
},
"dataSource": "items",
"fillEmptyRows": true,
"bands": {
"title": {
"height": 96,
"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": "billNo",
"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": "{format(dueDate, \"yyyy년 M월 d일 (ddd)\")}",
"style": {
"border": "0.2 solid #555",
"bold": true,
"color": "#c8102e"
}
},
{
"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.name} 귀하",
"style": {
"border": "0.2 solid #555",
"bold": true
}
},
{
"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": "text",
"x": 0,
"y": 77,
"w": 35,
"h": 8,
"text": "입금 계좌",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #555"
}
},
{
"type": "text",
"x": 35,
"y": 77,
"w": 145,
"h": 8,
"text": "{bank.name} {bank.account} 예금주 {bank.holder}",
"style": {
"border": "0.2 solid #555",
"bold": true
}
}
]
},
"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
}
}
]
}
}
}예제 데이터
{
"billNo": "B-2026-10-0042",
"date": "2026-10-20",
"dueDate": "2026-10-31",
"supplier": {
"name": "(주)세컨드코리아",
"ceo": "구명석",
"bizNo": "7928703276",
"address": "경기도 파주시 와석순환로 507, 701호",
"type": "정보통신업",
"item": "소프트웨어 개발",
"phone": "07077681326"
},
"customer": {
"name": "(주)한빛물산"
},
"bank": {
"name": "국민은행",
"account": "123456-01-234567",
"holder": "(주)세컨드코리아"
},
"items": [
{
"name": "보고서 서버 유지보수 (10월)",
"spec": "월 정액",
"unit": "월",
"qty": 1,
"price": 550000
},
{
"name": "양식 수정 (급여명세서)",
"spec": "추가 요청",
"unit": "건",
"qty": 2,
"price": 150000
},
{
"name": "현장 출장 지원",
"spec": "반일",
"unit": "회",
"qty": 1,
"price": 200000
}
],
"note": "기한 내 입금 부탁드립니다. 계산서는 입금 확인 후 발행됩니다."
}