경력증명서 양식
근무 기간·부서·직위·담당 업무를 행으로 늘어놓는 경력증명서.
사용법
- 아래 예제 데이터와 같은 구조로 내 데이터를 만듭니다. 서버에서 JSON으로 내려 주면 됩니다.
- getTemplate(id)로 정의를 불러오거나, 아래 JSON을 내 프로젝트에 저장해서 씁니다.
- 회사 이름·로고·직인·문구는 [디자이너에서 열기]로 바꾼 뒤 [저장]으로 JSON을 받습니다.
- 인쇄, PDF, 엑셀, HWPX 저장은 뷰어 도구 모음에 이미 있습니다.
import { getTemplate, createViewer } from '@freereportjs/core';
import '@freereportjs/core/styles.css';
const t = getTemplate('career-certificate'); // a fresh copy each call
createViewer(document.getElementById('report'), {
definition: t.definition,
data: 내데이터, // 아래 예제 데이터와 같은 구조
});직인은 데이터의 글자로 그려지는 생성 직인입니다. 실제 인감 이미지를 쓰려면 디자이너에서 직인 요소에 이미지를 지정하세요. 글꼴은 나눔고딕·나눔명조가 기본입니다.
데이터 구조
| 키 | 종류 | 필드 |
|---|---|---|
docNo | string | 제 2026-0533 호 |
person | 객체 | name, birth, address, dept, position, joined |
purpose | string | 이직 제출용 |
company | 객체 | name, ceo, address |
issued | string | 2026-10-15 |
careers[] | 행 배열 (3행) · 상세 밴드가 반복 | from, to, dept, position, duty |
보고서 정의 (JSON)
{
"version": 1,
"name": "경력증명서",
"page": {
"size": "A4",
"margins": 20
},
"font": {
"family": "Nanum Gothic",
"size": 10
},
"dataSource": "careers",
"watermark": {
"text": "{company.name} 원본",
"repeat": true,
"opacity": 0.05,
"fontSize": 9,
"gap": 32,
"angle": -30
},
"bands": {
"title": {
"height": 96,
"elements": [
{
"type": "field",
"x": 0,
"y": 0,
"w": 85,
"h": 7,
"expr": "docNo",
"style": {
"fontSize": 9,
"color": "#555"
}
},
{
"type": "text",
"x": 0,
"y": 12,
"w": 170,
"h": 18,
"text": "경 력 증 명 서",
"style": {
"fontSize": 26,
"bold": true,
"align": "center",
"letterSpacing": 1.5
}
},
{
"type": "text",
"x": 0,
"y": 40,
"w": 10,
"h": 33,
"text": "인\n적\n사\n항",
"style": {
"background": "#f6f7f9",
"bold": true,
"align": "center",
"border": "0.25 solid #333",
"lineHeight": 1.5
}
},
{
"type": "text",
"x": 10,
"y": 40,
"w": 30,
"h": 11,
"text": "성 명",
"style": {
"background": "#f6f7f9",
"bold": true,
"align": "center",
"border": "0.25 solid #333"
}
},
{
"type": "field",
"x": 40,
"y": 40,
"w": 50,
"h": 11,
"expr": "person.name",
"style": {
"border": "0.25 solid #333",
"padding": [
0.5,
2,
0.5,
2
]
}
},
{
"type": "text",
"x": 90,
"y": 40,
"w": 30,
"h": 11,
"text": "생년월일",
"style": {
"background": "#f6f7f9",
"bold": true,
"align": "center",
"border": "0.25 solid #333"
}
},
{
"type": "text",
"x": 120,
"y": 40,
"w": 50,
"h": 11,
"text": "{format(person.birth, \"yyyy년 M월 d일\")}",
"style": {
"border": "0.25 solid #333",
"padding": [
0.5,
2,
0.5,
2
]
}
},
{
"type": "text",
"x": 10,
"y": 51,
"w": 30,
"h": 22,
"text": "주 소",
"style": {
"background": "#f6f7f9",
"bold": true,
"align": "center",
"border": "0.25 solid #333"
}
},
{
"type": "field",
"x": 40,
"y": 51,
"w": 130,
"h": 22,
"expr": "person.address",
"style": {
"border": "0.25 solid #333",
"padding": [
0.5,
2,
0.5,
2
]
}
},
{
"type": "text",
"x": 0,
"y": 82,
"w": 170,
"h": 8,
"text": "■ 경력 사항",
"style": {
"bold": true,
"fontSize": 11,
"padding": 0.5
}
}
]
},
"columnHeader": {
"height": 9,
"elements": [
{
"type": "text",
"x": 0,
"y": 0,
"w": 52,
"h": 9,
"text": "근 무 기 간",
"style": {
"background": "#f6f7f9",
"bold": true,
"align": "center",
"border": "0.25 solid #333"
}
},
{
"type": "text",
"x": 52,
"y": 0,
"w": 30,
"h": 9,
"text": "부 서",
"style": {
"background": "#f6f7f9",
"bold": true,
"align": "center",
"border": "0.25 solid #333"
}
},
{
"type": "text",
"x": 82,
"y": 0,
"w": 26,
"h": 9,
"text": "직 위",
"style": {
"background": "#f6f7f9",
"bold": true,
"align": "center",
"border": "0.25 solid #333"
}
},
{
"type": "text",
"x": 108,
"y": 0,
"w": 62,
"h": 9,
"text": "담 당 업 무",
"style": {
"background": "#f6f7f9",
"bold": true,
"align": "center",
"border": "0.25 solid #333"
}
}
]
},
"detail": {
"height": 9,
"elements": [
{
"type": "text",
"x": 0,
"y": 0,
"w": 52,
"h": 9,
"text": "{format(from, \"yyyy.MM.dd\")} ~ {iif(to, format(to, \"yyyy.MM.dd\"), \"현재\")}",
"style": {
"border": "0.25 solid #333",
"padding": [
0.5,
2,
0.5,
2
],
"align": "center",
"fontSize": 9.5
}
},
{
"type": "field",
"x": 52,
"y": 0,
"w": 30,
"h": 9,
"expr": "dept",
"style": {
"border": "0.25 solid #333",
"padding": [
0.5,
2,
0.5,
2
],
"align": "center"
}
},
{
"type": "field",
"x": 82,
"y": 0,
"w": 26,
"h": 9,
"expr": "position",
"style": {
"border": "0.25 solid #333",
"padding": [
0.5,
2,
0.5,
2
],
"align": "center"
}
},
{
"type": "field",
"x": 108,
"y": 0,
"w": 62,
"h": 9,
"expr": "duty",
"style": {
"border": "0.25 solid #333",
"padding": [
0.5,
2,
0.5,
2
],
"fontSize": 9
}
}
]
},
"summary": {
"height": 104,
"elements": [
{
"type": "text",
"x": 0,
"y": 4,
"w": 40,
"h": 11,
"text": "용 도",
"style": {
"background": "#f6f7f9",
"bold": true,
"align": "center",
"border": "0.25 solid #333"
}
},
{
"type": "field",
"x": 40,
"y": 4,
"w": 130,
"h": 11,
"expr": "purpose",
"style": {
"border": "0.25 solid #333",
"padding": [
0.5,
2,
0.5,
2
]
}
},
{
"type": "text",
"x": 0,
"y": 26,
"w": 170,
"h": 10,
"text": "위와 같이 경력을 증명합니다.",
"style": {
"align": "center",
"fontSize": 13
}
},
{
"type": "text",
"x": 0,
"y": 46,
"w": 170,
"h": 10,
"text": "{format(issued, \"yyyy년 M월 d일\")}",
"style": {
"align": "center",
"fontSize": 12
}
},
{
"type": "text",
"x": 0,
"y": 72,
"w": 170,
"h": 12,
"text": "{company.name} 대표이사 {company.ceo}",
"style": {
"align": "center",
"fontSize": 15,
"bold": true,
"letterSpacing": 0.6
}
},
{
"type": "seal",
"x": 133,
"y": 65,
"w": 22,
"h": 22,
"rotate": -4,
"generate": {
"text": "{replace(company.name, \"(주)\", \"\")}대표이사인",
"shape": "square"
},
"style": {
"fontFamily": "Nanum Myeongjo"
}
},
{
"type": "field",
"x": 0,
"y": 85,
"w": 170,
"h": 7,
"expr": "company.address",
"style": {
"align": "center",
"fontSize": 9,
"color": "#555"
}
}
]
}
}
}예제 데이터
{
"docNo": "제 2026-0533 호",
"person": {
"name": "홍길동",
"birth": "1990-03-15",
"address": "서울특별시 중구 세종대로 110",
"dept": "개발팀",
"position": "책임연구원",
"joined": "2019-03-04"
},
"purpose": "이직 제출용",
"company": {
"name": "(주)세컨드코리아",
"ceo": "구명석",
"address": "경기도 파주시 와석순환로 507, 701호"
},
"issued": "2026-10-15",
"careers": [
{
"from": "2019-03-04",
"to": "2021-02-28",
"dept": "개발팀",
"position": "연구원",
"duty": "사내 업무 시스템 개발"
},
{
"from": "2021-03-01",
"to": "2023-12-31",
"dept": "개발팀",
"position": "선임연구원",
"duty": "보고서 엔진 설계, PDF 출력 모듈 개발"
},
{
"from": "2024-01-01",
"to": null,
"dept": "개발팀",
"position": "책임연구원",
"duty": "웹 디자이너 개발 총괄, 고객사 기술 지원"
}
]
}