라벨은 디자인하고,
인쇄는 한 줄로.

<script src="https://82label.app/cdn/v0.1.0/82label.min.js"></script>

<button id="print">라벨 인쇄</button>
<script>
  const template = {
    v: 1,
    name: '상품 바코드 50×30',
    paper: { kind: 'roll', dpi: 203 },
    label: { width: 50, height: 30 },
    elements: [
      { type: 'text', x: 2.5, y: 2, w: 45, h: 6, text: '{{name}}', size: 9, bold: true, fit: 'shrink' },
      { type: 'text', x: 2.5, y: 8, w: 45, h: 4, text: '{{price}}', size: 8 },
      { type: 'barcode', x: 2.5, y: 13, w: 45, h: 15, format: 'code128', value: '{{sku}}' },
    ],
  };

  document.getElementById('print').onclick = () =>
    Label82.print(template, [
      { name: '무선 이어폰 프로', price: '39,000원', sku: 'EP-2026-0412' },
      { name: '고속 충전 케이블 1m', price: '9,900원', sku: 'CB-1M-0007' },
    ]);
</script>

<script src="https://82label.app/cdn/v0.1.0/82label.min.js"></script>
<script>
  // 82label.app 에 저장한 서식은 ID 로 부릅니다. 사이트에서 고치면 바로 반영됩니다.
  Label82.print('lbl_a1b2c3d4e5', [
    { name: '무선 이어폰 프로', price: '39,000원', sku: 'EP-2026-0412' },
  ]);
</script>

<link rel="stylesheet" href="https://82label.app/cdn/v0.1.0/82label.css">
<script src="https://82label.app/cdn/v0.1.0/82label.min.js"></script>

<label-82
  template="lbl_a1b2c3d4e5"
  data='[{"name":"무선 이어폰 프로","price":"39,000원","sku":"EP-2026-0412"}]'
  button="라벨 인쇄">
</label-82>

npm i @82label/core

import { print } from '@82label/core';
import template from './labels/product.json'; // 디자이너에서 받은 서식 JSON

async function printLabels(orders) {
  const rows = orders.map((o) => ({ name: o.productName, price: o.priceText, sku: o.sku }));
  const result = await print(template, rows);
  // result.via: 'agent'(출력 프로그램) 또는 'browser'
  return result;
}

import { useState } from 'react';
import { print } from '@82label/core';
import template from './labels/product.json';

export function PrintLabelButton({ items }) {
  const [busy, setBusy] = useState(false);
  const onClick = async () => {
    setBusy(true);
    try {
      const rows = items.map((it) => ({ name: it.name, price: it.price, sku: it.sku }));
      const r = await print(template, rows);
      if (r.status === 'pending_permission') alert('출력 프로그램에서 이 사이트를 허용해 주세요.');
    } finally {
      setBusy(false);
    }
  };
  return <button onClick={onClick} disabled={busy}>라벨 인쇄</button>;
}

<script setup>
import { ref } from 'vue';
import { print } from '@82label/core';
import template from './labels/product.json';

const props = defineProps({ items: Array });
const busy = ref(false);

async function onPrint() {
  busy.value = true;
  try {
    await print(template, props.items.map((it) => ({ name: it.name, price: it.price, sku: it.sku })));
  } finally {
    busy.value = false;
  }
}
</script>

<template>
  <button :disabled="busy" @click="onPrint">라벨 인쇄</button>
</template>