Dispatch label
Build the small dispatch label you send to a label printer. You learn paper size and orientation, Code 128 barcodes, and taking a PNG instead of a PDF.
このレシピで身につくこと
エディタで作る
- Set the paper to A5 landscape and cut the margins to 12px. On a label the paper is the label, so large margins just lose print area.
- Orientation is applied after size — a5 plus landscape is an A5 turned on its side.
- Add a code object and choose Code 128. Logistics scanners sweep in one line, so a 1D barcode is the right choice.
- Make the barcode wide and give it enough height. If the box proportions collapse the scanner cannot read it.
- Print the order number and destination large. A label is read by a person from a metre away.
スキーマと API で作る
- page.size and page.orientation set the paper: a4, a5, letter or legal.
- A code node encodes props.text. codeKind picks the kind, and ecc is meaningful only for QR.
- Set format to "png" and you get an image. Label printer software usually handles an image better.
- An image has no pages. A document that would print as three pages becomes one tall image, with no header, footer or page numbers.
出来上がったドキュメント
下の JSON は、2 つの道筋が生むドキュメントそのものです。テストがこれを検証し、警告なしでレンダリングされることも確認しているので、そのまま貼り付けてお使いいただけます。
{
"v": 1,
"unit": "px",
"page": {
"size": "a5",
"orientation": "landscape",
"margin": {
"t": 12,
"r": 12,
"b": 12,
"l": 12
},
"header": "",
"footer": ""
},
"fonts": [],
"styles": [
{
"id": "s_big",
"fontFamily": "Liberation Sans",
"fontSize": 30,
"fontWeight": 700,
"italic": false,
"color": "#111111",
"bg": "transparent",
"align": "left",
"valign": "top",
"lineHeight": 1.5,
"border": "none",
"radius": 0,
"opacity": 1
},
{
"id": "s_l",
"fontFamily": "Liberation Sans",
"fontSize": 13,
"fontWeight": 400,
"italic": false,
"color": "#222222",
"bg": "transparent",
"align": "left",
"valign": "top",
"lineHeight": 1.5,
"border": "none",
"radius": 0,
"opacity": 1
},
{
"id": "s_cap",
"fontFamily": "Liberation Sans",
"fontSize": 10,
"fontWeight": 400,
"italic": false,
"color": "#666666",
"bg": "transparent",
"align": "center",
"valign": "top",
"lineHeight": 1.5,
"border": "none",
"radius": 0,
"opacity": 1
}
],
"nodes": [
{
"id": "n_dest",
"parent": "",
"order": 0,
"type": "label",
"x": 0,
"y": 0,
"w": 400,
"h": 40,
"show": "",
"styleId": "s_big",
"props": {
"text": "{{ data.dest }}",
"src": "",
"fit": "",
"thickness": 0,
"stroke": "",
"fill": "",
"repeat": "",
"as": "",
"break": "",
"keep": "",
"padding": 0,
"padY": 0,
"padX": 0,
"align": "",
"valign": "",
"wrap": "",
"bind": "",
"headerHeight": 0,
"rowHeight": 0,
"max": 0,
"columns": [],
"rows": 0,
"cells": [],
"chartKind": "",
"codeKind": "",
"ecc": "",
"fieldKind": "",
"fieldName": "",
"options": [],
"required": false,
"readonly": false,
"html": ""
},
"name": "Destination"
},
{
"id": "n_order",
"parent": "",
"order": 1,
"type": "label",
"x": 0,
"y": 46,
"w": 400,
"h": 22,
"show": "",
"styleId": "s_l",
"props": {
"text": "Order {{ data.order }} · {{ data.boxes }} boxes",
"src": "",
"fit": "",
"thickness": 0,
"stroke": "",
"fill": "",
"repeat": "",
"as": "",
"break": "",
"keep": "",
"padding": 0,
"padY": 0,
"padX": 0,
"align": "",
"valign": "",
"wrap": "",
"bind": "",
"headerHeight": 0,
"rowHeight": 0,
"max": 0,
"columns": [],
"rows": 0,
"cells": [],
"chartKind": "",
"codeKind": "",
"ecc": "",
"fieldKind": "",
"fieldName": "",
"options": [],
"required": false,
"readonly": false,
"html": ""
},
"name": "Order"
},
{
"id": "n_code",
"parent": "",
"order": 2,
"type": "code",
"x": 0,
"y": 86,
"w": 500,
"h": 110,
"show": "",
"styleId": "s_l",
"props": {
"text": "{{ data.barcode }}",
"src": "",
"fit": "",
"thickness": 0,
"stroke": "",
"fill": "",
"repeat": "",
"as": "",
"break": "",
"keep": "",
"padding": 0,
"padY": 0,
"padX": 0,
"align": "",
"valign": "",
"wrap": "",
"bind": "",
"headerHeight": 0,
"rowHeight": 0,
"max": 0,
"columns": [],
"rows": 0,
"cells": [],
"chartKind": "",
"codeKind": "code128",
"ecc": "",
"fieldKind": "",
"fieldName": "",
"options": [],
"required": false,
"readonly": false,
"html": ""
},
"name": "Barcode"
},
{
"id": "n_code_l",
"parent": "",
"order": 3,
"type": "label",
"x": 0,
"y": 200,
"w": 500,
"h": 16,
"show": "",
"styleId": "s_cap",
"props": {
"text": "{{ data.barcode }}",
"src": "",
"fit": "",
"thickness": 0,
"stroke": "",
"fill": "",
"repeat": "",
"as": "",
"break": "",
"keep": "",
"padding": 0,
"padY": 0,
"padX": 0,
"align": "",
"valign": "",
"wrap": "",
"bind": "",
"headerHeight": 0,
"rowHeight": 0,
"max": 0,
"columns": [],
"rows": 0,
"cells": [],
"chartKind": "",
"codeKind": "",
"ecc": "",
"fieldKind": "",
"fieldName": "",
"options": [],
"required": false,
"readonly": false,
"html": ""
},
"name": "Barcode digits"
}
]
}リクエストの本文です。上のドキュメントを template に、下のデータを data に入れてください。
{
"template": "(the document above)",
"data": {
"dest": "Suwon DC 3",
"order": "SO-2026-8841",
"boxes": 3,
"barcode": "SO20268841"
},
"format": "png"
}