跳到主要内容

条形码

和二维码思路完全一致，只是生成库换成 JsBarcode。适用于商品标签、票券、库存管理等场景。

添加一个条形码​

import JsBarcode from 'jsbarcode';
import { svgToURL } from '@ydesign/react-editor/utils/svg';
import { generateObjectId } from '@ydesign/core';

function generateBarcodeSvg(text: string, options?: JsBarcode.BaseOptions) {
  // 创建一个离屏 SVG 节点
  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  JsBarcode(svg, text, {
    format: 'CODE128',
    displayValue: true,
    fontSize: 14,
    margin: 10,
    ...options,
  });
  return svg.outerHTML;
}

async function addBarcode(store: any, text: string) {
  const svgStr = generateBarcodeSvg(text);
  store.addElement({
    id: generateObjectId(),
    type: 'Image',
    src: svgToURL(svgStr),
    left: 100,
    top: 100,
    width: 400,
    height: 120,
    custom: {
      barcodeText: text,
      barcodeFormat: 'CODE128',
    },
  });
}

// 用法
addBarcode(store, '6901234567890');

选中后修改​

import { observer } from 'mobx-react-lite';
import { Input, Select } from 'antd';

const BarcodeEditor = observer(({ store }) => {
  const el = store.selectedElements[0];
  if (!el?.custom?.barcodeText) return null;

  const regenerate = (text: string, format: string) => {
    const svgStr = generateBarcodeSvg(text, { format: format as any });
    store.set(
      {
        src: svgToURL(svgStr),
        custom: { barcodeText: text, barcodeFormat: format },
      },
      el,
    );
  };

  return (
    <div style={{ padding: 12, display: 'flex', flexDirection: 'column', gap: 8 }}>
      <Input
        value={el.custom.barcodeText}
        onChange={e => regenerate(e.target.value, el.custom.barcodeFormat)}
      />
      <Select
        value={el.custom.barcodeFormat}
        onChange={fmt => regenerate(el.custom.barcodeText, fmt)}
        options={[
          { value: 'CODE128', label: 'CODE128（最常用）' },
          { value: 'EAN13', label: 'EAN-13（商品零售）' },
          { value: 'UPC', label: 'UPC（北美零售）' },
          { value: 'CODE39', label: 'CODE39（工业）' },
        ]}
      />
    </div>
  );
});

常用格式速查​

格式数据范围典型用途
CODE128ASCII 全集快递单、物流
EAN1313 位数字中国 / 欧洲零售商品
UPC12 位数字北美零售商品
CODE39字母数字 + 少量符号工业标签、汽车零件

选错格式会报错或生成无效码，接入前要和业务方确认。

关键点​

  • 错误输入容错：JsBarcode 在输入不符合格式时会抛错，建议用 try/catch 包起来给用户提示
  • 扫码验证：生产环境务必用真实扫码枪 / 手机扫码测过一遍，别只肉眼看
  • 高清导出：SVG 本身无损，走 云渲染 API 的 multiplier: 4 打印足够清晰

相关文档​