82label
내 서식English시작하기

문서 › 웹 컴포넌트와 프레임워크

웹 컴포넌트 <label-82>

태그 하나로 미리보기와 인쇄 버튼. 속성, 프로퍼티, 이벤트.

CDN 스크립트를 넣으면 <label-82> 가 등록됩니다. 첫 번째 행으로 미리보기를 그리고, 버튼을 누르면 모든 행을 인쇄합니다. 프레임워크 없이 서버에서 HTML 을 만드는 화면(PHP, JSP, ASP)에 잘 맞습니다.

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

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

속성

속성설명
template서식 ID(lbl_…) 또는 서식 JSON 문자열.
dataJSON 객체 하나 또는 배열. 배열의 항목마다 라벨 한 장.
printer출력 프로그램의 프린터 이름.
modeauto(기본) · agent · browser
start-at시트: 몇 번째 칸부터.
button버튼 글자. 기본 "인쇄".
previewfalse 면 미리보기를 숨기고 버튼만.
framesfalse 면 미리 인쇄된 틀(layer: 'frame')을 빼고 인쇄.
base서식 ID 를 받을 서버(기본 https://82label.app).

스크립트에서

const el = document.querySelector('label-82');
el.template = template;        // 객체를 그대로
el.data = orders.map(toRow);   // 배열
el.addEventListener('printed', (e) => console.log(e.detail)); // PrintResult
el.addEventListener('error', (e) => console.error(e.detail));
await el.print();              // 버튼 없이 바로

모양 바꾸기

82label.css 가 미리보기 틀과 버튼을 꾸밉니다. CSS 변수로 바꾸세요. 라벨 그림 자체는 종이라서 늘 흰 바탕입니다.

label-82 {
  --l82-accent: #d9431f;   /* 버튼 */
  --l82-accent-ink: #fff;
  --l82-bg: #fafaf9;       /* 미리보기 틀 */
  --l82-border: #e4e4e0;
  --l82-radius: 8px;
  --l82-font: Pretendard, sans-serif;
}

안내 문구(허용 대기, 구독 필요 등)는 버튼 아래 .l82-notice 에 나옵니다. 다른 이름의 태그가 필요하면 Label82.defineLabelElement('shop-label').