출고 라벨 양식
A4 한 장에 8칸(2×4). 받는 분, 주소, 송장 바코드와 QR.
사용법
- 아래 예제 데이터와 같은 구조로 내 데이터를 만듭니다. 서버에서 JSON으로 내려 주면 됩니다.
- getTemplate(id)로 정의를 불러오거나, 아래 JSON을 내 프로젝트에 저장해서 씁니다.
- 회사 이름·로고·직인·문구는 [디자이너에서 열기]로 바꾼 뒤 [저장]으로 JSON을 받습니다.
- 인쇄, PDF, 엑셀, HWPX 저장은 뷰어 도구 모음에 이미 있습니다.
import { getTemplate, createViewer } from '@freereportjs/core';
import '@freereportjs/core/styles.css';
const t = getTemplate('shipping-label'); // a fresh copy each call
createViewer(document.getElementById('report'), {
definition: t.definition,
data: 내데이터, // 아래 예제 데이터와 같은 구조
});직인은 데이터의 글자로 그려지는 생성 직인입니다. 실제 인감 이미지를 쓰려면 디자이너에서 직인 요소에 이미지를 지정하세요. 글꼴은 나눔고딕·나눔명조가 기본입니다.
데이터 구조
| 키 | 종류 | 필드 |
|---|---|---|
sender | 객체 | name, phone |
rows[] | 행 배열 (8행) · 상세 밴드가 반복 | carrier, shipDate, trackingNo, orderNo, receiver, item, qty |
보고서 정의 (JSON)
{
"version": 1,
"name": "출고 라벨",
"page": {
"size": "A4",
"margins": [
12,
6,
12,
6
]
},
"font": {
"family": "Nanum Gothic",
"size": 9
},
"bands": {
"detail": {
"height": 68,
"columns": 2,
"columnGap": 4,
"canGrow": false,
"elements": [
{
"type": "rect",
"x": 0,
"y": 0,
"w": 97,
"h": 66,
"radius": 2,
"width": 0.3,
"color": "#333333"
},
{
"type": "text",
"x": 3,
"y": 2,
"w": 50,
"h": 6,
"text": "{carrier} 출고",
"style": {
"bold": true,
"fontSize": 10
}
},
{
"type": "text",
"x": 53,
"y": 2,
"w": 41,
"h": 6,
"text": "{format(shipDate, \"yyyy-MM-dd\")}",
"style": {
"align": "right",
"fontSize": 8,
"color": "#555"
}
},
{
"type": "line",
"x": 3,
"y": 9,
"w": 91,
"h": 0,
"width": 0.3
},
{
"type": "text",
"x": 3,
"y": 10,
"w": 14,
"h": 7,
"text": "받는 분",
"style": {
"fontSize": 7,
"color": "#555",
"padding": [
0.5,
0.5,
0.5,
0.5
]
}
},
{
"type": "text",
"x": 17,
"y": 10,
"w": 52,
"h": 7,
"text": "{receiver.name}",
"style": {
"bold": true,
"fontSize": 12
}
},
{
"type": "text",
"x": 3,
"y": 17,
"w": 14,
"h": 11,
"text": "주소",
"style": {
"fontSize": 7,
"color": "#555",
"padding": [
0.5,
0.5,
0.5,
0.5
],
"valign": "top"
}
},
{
"type": "text",
"x": 17,
"y": 17,
"w": 52,
"h": 11,
"text": "{receiver.address}",
"style": {
"fontSize": 8.5,
"valign": "top"
}
},
{
"type": "text",
"x": 3,
"y": 28,
"w": 14,
"h": 6,
"text": "전화",
"style": {
"fontSize": 7,
"color": "#555",
"padding": [
0.5,
0.5,
0.5,
0.5
]
}
},
{
"type": "text",
"x": 17,
"y": 28,
"w": 52,
"h": 6,
"text": "{phone(receiver.phone)}",
"style": {
"fontSize": 8.5
}
},
{
"type": "barcode",
"x": 72,
"y": 11,
"w": 22,
"h": 22,
"expr": "\"https://track.example.com/\" + trackingNo",
"format": "qr"
},
{
"type": "line",
"x": 3,
"y": 35,
"w": 91,
"h": 0,
"width": 0.2,
"dash": "dashed",
"color": "#888888"
},
{
"type": "text",
"x": 3,
"y": 36,
"w": 14,
"h": 6,
"text": "품목",
"style": {
"fontSize": 7,
"color": "#555",
"padding": [
0.5,
0.5,
0.5,
0.5
]
}
},
{
"type": "text",
"x": 17,
"y": 36,
"w": 77,
"h": 6,
"text": "{item} × {qty}",
"style": {
"fontSize": 8.5
}
},
{
"type": "text",
"x": 3,
"y": 42,
"w": 14,
"h": 6,
"text": "보내는 분",
"style": {
"fontSize": 7,
"color": "#555",
"padding": [
0.5,
0.5,
0.5,
0.5
]
}
},
{
"type": "text",
"x": 17,
"y": 42,
"w": 77,
"h": 6,
"text": "{sender.name} {phone(sender.phone)}",
"style": {
"fontSize": 8
}
},
{
"type": "barcode",
"x": 3,
"y": 49,
"w": 60,
"h": 15,
"expr": "trackingNo",
"format": "code128"
},
{
"type": "text",
"x": 65,
"y": 50,
"w": 29,
"h": 6,
"text": "주문번호",
"style": {
"fontSize": 7,
"color": "#555",
"padding": [
0.5,
0.5,
0.5,
0.5
],
"align": "right"
}
},
{
"type": "field",
"x": 65,
"y": 56,
"w": 29,
"h": 7,
"expr": "orderNo",
"style": {
"align": "right",
"bold": true,
"fontSize": 9
}
}
]
}
}
}예제 데이터
{
"sender": {
"name": "(주)세컨드코리아 물류센터",
"phone": "07077681326"
},
"rows": [
{
"carrier": "한빛택배",
"shipDate": "2026-10-20",
"trackingNo": "568320261020",
"orderNo": "ORD-1040",
"receiver": {
"name": "김민준",
"address": "서울특별시 강남구 테헤란로 152",
"phone": "01023450000"
},
"item": "무선 키보드",
"qty": 1
},
{
"carrier": "한빛택배",
"shipDate": "2026-10-20",
"trackingNo": "568320261027",
"orderNo": "ORD-1041",
"receiver": {
"name": "이서연",
"address": "부산광역시 해운대구 센텀중앙로 79",
"phone": "01023451111"
},
"item": "A4 복사용지 (박스)",
"qty": 2
},
{
"carrier": "한빛택배",
"shipDate": "2026-10-20",
"trackingNo": "568320261034",
"orderNo": "ORD-1042",
"receiver": {
"name": "박도윤",
"address": "대구광역시 중구 동성로 30",
"phone": "01023452222"
},
"item": "토너 카트리지",
"qty": 3
},
{
"carrier": "한빛택배",
"shipDate": "2026-10-20",
"trackingNo": "568320261041",
"orderNo": "ORD-1043",
"receiver": {
"name": "최지우",
"address": "인천광역시 연수구 송도과학로 32",
"phone": "01023453333"
},
"item": "USB-C 허브",
"qty": 1
},
{
"carrier": "한빛택배",
"shipDate": "2026-10-20",
"trackingNo": "568320261048",
"orderNo": "ORD-1044",
"receiver": {
"name": "정하준",
"address": "광주광역시 서구 상무중앙로 110",
"phone": "01023454444"
},
"item": "27형 모니터",
"qty": 2
},
{
"carrier": "한빛택배",
"shipDate": "2026-10-20",
"trackingNo": "568320261055",
"orderNo": "ORD-1045",
"receiver": {
"name": "강서윤",
"address": "대전광역시 유성구 대학로 99",
"phone": "01023455555"
},
"item": "무선 마우스",
"qty": 3
},
{
"carrier": "한빛택배",
"shipDate": "2026-10-20",
"trackingNo": "568320261062",
"orderNo": "ORD-1046",
"receiver": {
"name": "조은우",
"address": "경기도 성남시 분당구 판교역로 166",
"phone": "01023456666"
},
"item": "사무용 의자",
"qty": 1
},
{
"carrier": "한빛택배",
"shipDate": "2026-10-20",
"trackingNo": "568320261069",
"orderNo": "ORD-1047",
"receiver": {
"name": "윤지호",
"address": "경기도 수원시 영통구 광교로 145",
"phone": "01023457777"
},
"item": "노트북 15형",
"qty": 2
}
]
}