급여명세서 양식
지급·공제 항목 표, 실지급액, 근로 시간과 계산 방법(임금명세서 필수 기재 사항)을 담은 급여명세서.
사용법
- 아래 예제 데이터와 같은 구조로 내 데이터를 만듭니다. 서버에서 JSON으로 내려 주면 됩니다.
- getTemplate(id)로 정의를 불러오거나, 아래 JSON을 내 프로젝트에 저장해서 씁니다.
- 회사 이름·로고·직인·문구는 [디자이너에서 열기]로 바꾼 뒤 [저장]으로 JSON을 받습니다.
- 인쇄, PDF, 엑셀, HWPX 저장은 뷰어 도구 모음에 이미 있습니다.
import { getTemplate, createViewer } from '@freereportjs/core';
import '@freereportjs/core/styles.css';
const t = getTemplate('payslip'); // a fresh copy each call
createViewer(document.getElementById('report'), {
definition: t.definition,
data: 내데이터, // 아래 예제 데이터와 같은 구조
});직인은 데이터의 글자로 그려지는 생성 직인입니다. 실제 인감 이미지를 쓰려면 디자이너에서 직인 요소에 이미지를 지정하세요. 글꼴은 나눔고딕·나눔명조가 기본입니다.
데이터 구조
| 키 | 종류 | 필드 |
|---|---|---|
year | number | 2026 |
month | number | 10 |
payDate | string | 2026-10-25 |
company | 객체 | name, ceo, address |
employee | 객체 | name, no, dept, position, joined |
earnings[] | 행 배열 (6행) | name, amount |
deductions[] | 행 배열 (6행) | name, amount |
work | 객체 | days, overtime, night |
calc | string | 연장근로수당: 통상시급 15,152원 × 1.5 × 연장근로 12시간 = |
보고서 정의 (JSON)
{
"version": 1,
"name": "급여명세서",
"page": {
"size": "A4",
"margins": 15
},
"font": {
"family": "Nanum Gothic",
"size": 9
},
"bands": {
"title": {
"height": 196,
"elements": [
{
"type": "text",
"x": 0,
"y": 0,
"w": 180,
"h": 13,
"text": "{year}년 {month}월 급여명세서",
"style": {
"fontSize": 20,
"bold": true,
"align": "center",
"letterSpacing": 1
}
},
{
"type": "field",
"x": 0,
"y": 14,
"w": 180,
"h": 6,
"expr": "company.name",
"style": {
"align": "center",
"color": "#555"
}
},
{
"type": "text",
"x": 0,
"y": 24,
"w": 20,
"h": 7,
"text": "성 명",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #8a94a6"
}
},
{
"type": "text",
"x": 20,
"y": 24,
"w": 40,
"h": 7,
"text": "{employee.name}",
"style": {
"border": "0.2 solid #8a94a6",
"bold": true
}
},
{
"type": "text",
"x": 60,
"y": 24,
"w": 20,
"h": 7,
"text": "사 번",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #8a94a6"
}
},
{
"type": "text",
"x": 80,
"y": 24,
"w": 40,
"h": 7,
"text": "{employee.no}",
"style": {
"border": "0.2 solid #8a94a6"
}
},
{
"type": "text",
"x": 120,
"y": 24,
"w": 20,
"h": 7,
"text": "부 서",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #8a94a6"
}
},
{
"type": "text",
"x": 140,
"y": 24,
"w": 40,
"h": 7,
"text": "{employee.dept}",
"style": {
"border": "0.2 solid #8a94a6"
}
},
{
"type": "text",
"x": 0,
"y": 31,
"w": 20,
"h": 7,
"text": "직 위",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #8a94a6"
}
},
{
"type": "text",
"x": 20,
"y": 31,
"w": 40,
"h": 7,
"text": "{employee.position}",
"style": {
"border": "0.2 solid #8a94a6"
}
},
{
"type": "text",
"x": 60,
"y": 31,
"w": 20,
"h": 7,
"text": "입 사 일",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #8a94a6"
}
},
{
"type": "text",
"x": 80,
"y": 31,
"w": 40,
"h": 7,
"text": "{format(employee.joined, \"yyyy-MM-dd\")}",
"style": {
"border": "0.2 solid #8a94a6"
}
},
{
"type": "text",
"x": 120,
"y": 31,
"w": 20,
"h": 7,
"text": "지 급 일",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #8a94a6"
}
},
{
"type": "text",
"x": 140,
"y": 31,
"w": 40,
"h": 7,
"text": "{format(payDate, \"yyyy-MM-dd\")}",
"style": {
"border": "0.2 solid #8a94a6"
}
},
{
"type": "table",
"x": 0,
"y": 42,
"w": 88,
"h": 56,
"source": "earnings",
"rowHeight": 7,
"headerStyle": {
"background": "#eef1f6",
"bold": true,
"align": "center",
"border": "0.2 solid #8a94a6"
},
"footerLabel": "지급액 계",
"columns": [
{
"header": "지급 항목",
"expr": "name"
},
{
"header": "금액",
"expr": "amount",
"width": 34,
"format": "#,##0",
"align": "right",
"sum": true
}
]
},
{
"type": "table",
"x": 92,
"y": 42,
"w": 88,
"h": 56,
"source": "deductions",
"rowHeight": 7,
"headerStyle": {
"background": "#eef1f6",
"bold": true,
"align": "center",
"border": "0.2 solid #8a94a6"
},
"footerLabel": "공제액 계",
"columns": [
{
"header": "공제 항목",
"expr": "name"
},
{
"header": "금액",
"expr": "amount",
"width": 34,
"format": "#,##0",
"align": "right",
"sum": true
}
]
},
{
"type": "text",
"x": 0,
"y": 102,
"w": 40,
"h": 11,
"text": "실 지 급 액",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #8a94a6",
"fontSize": 11
}
},
{
"type": "text",
"x": 40,
"y": 102,
"w": 140,
"h": 11,
"text": "{sumOf(earnings, \"amount\") - sumOf(deductions, \"amount\"):#,##0}원 ({koreanAmount(sumOf(earnings, \"amount\") - sumOf(deductions, \"amount\"))})",
"style": {
"border": "0.2 solid #8a94a6",
"bold": true,
"fontSize": 11.5,
"align": "center"
}
},
{
"type": "text",
"x": 0,
"y": 118,
"w": 180,
"h": 7,
"text": "■ 근로 내역",
"style": {
"bold": true,
"padding": 0.5
}
},
{
"type": "text",
"x": 0,
"y": 125,
"w": 30,
"h": 7,
"text": "근로일수",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #8a94a6"
}
},
{
"type": "text",
"x": 30,
"y": 125,
"w": 30,
"h": 7,
"text": "{work.days}일",
"style": {
"border": "0.2 solid #8a94a6",
"align": "center"
}
},
{
"type": "text",
"x": 60,
"y": 125,
"w": 30,
"h": 7,
"text": "연장근로",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #8a94a6"
}
},
{
"type": "text",
"x": 90,
"y": 125,
"w": 30,
"h": 7,
"text": "{work.overtime}시간",
"style": {
"border": "0.2 solid #8a94a6",
"align": "center"
}
},
{
"type": "text",
"x": 120,
"y": 125,
"w": 30,
"h": 7,
"text": "야간근로",
"style": {
"background": "#f2f4f7",
"bold": true,
"align": "center",
"border": "0.2 solid #8a94a6"
}
},
{
"type": "text",
"x": 150,
"y": 125,
"w": 30,
"h": 7,
"text": "{work.night}시간",
"style": {
"border": "0.2 solid #8a94a6",
"align": "center"
}
},
{
"type": "text",
"x": 0,
"y": 136,
"w": 180,
"h": 7,
"text": "■ 계산 방법",
"style": {
"bold": true,
"padding": 0.5
}
},
{
"type": "text",
"x": 0,
"y": 143,
"w": 180,
"h": 30,
"text": "{calc}",
"style": {
"border": "0.2 solid #8a94a6",
"valign": "top",
"padding": 2,
"fontSize": 8.5,
"lineHeight": 1.45
}
},
{
"type": "text",
"x": 0,
"y": 180,
"w": 180,
"h": 8,
"text": "이번 달도 수고 많으셨습니다. {company.name}",
"style": {
"align": "center",
"color": "#4a5568"
}
}
]
}
}
}예제 데이터
{
"year": 2026,
"month": 10,
"payDate": "2026-10-25",
"company": {
"name": "(주)세컨드코리아",
"ceo": "구명석",
"address": "경기도 파주시 와석순환로 507, 701호"
},
"employee": {
"name": "홍길동",
"no": "E-1903",
"dept": "개발팀",
"position": "책임연구원",
"joined": "2019-03-04"
},
"earnings": [
{
"name": "기본급",
"amount": 3800000
},
{
"name": "직책수당",
"amount": 200000
},
{
"name": "연장근로수당",
"amount": 272727
},
{
"name": "야간근로수당",
"amount": 45455
},
{
"name": "식대 (비과세)",
"amount": 200000
},
{
"name": "자가운전보조금 (비과세)",
"amount": 200000
}
],
"deductions": [
{
"name": "국민연금",
"amount": 180000
},
{
"name": "건강보험",
"amount": 141800
},
{
"name": "장기요양보험",
"amount": 18360
},
{
"name": "고용보험",
"amount": 38770
},
{
"name": "소득세",
"amount": 213760
},
{
"name": "지방소득세",
"amount": 21370
}
],
"work": {
"days": 21,
"overtime": 12,
"night": 4
},
"calc": "연장근로수당: 통상시급 15,152원 × 1.5 × 연장근로 12시간 = 272,727원\n야간근로수당: 통상시급 15,152원 × 0.5 × 야간근로 4시간 = 30,303원 + 휴게 보정 15,152원\n4대 보험: 국민연금 4.5%, 건강보험 3.545%, 장기요양 건강보험료의 12.95%, 고용보험 0.9%\n소득세: 근로소득 간이세액표 (부양가족 1명), 지방소득세: 소득세의 10%"
}