package
Pang Label Designer

仓库

npm install @package/pang-label-designer
export interface DesignerOptions {
  showImportExport?: boolean;  // 是否显示导入导出按钮
  width: number;               // 标签宽度(mm)
  height: number;             // 标签高度(mm)
  dpi?: DPI;                  // 分辨率
}

import { LabelDesigner } from '@package/pang-label-designer';

const designer = new Designer('container', options);
designer.addComponent(ComponentType.TEXT, {
    id: 'text1',
    position: { x: 10, y: 10 },
    content: 'Hello, Pang Label Designer!',
    fontSize: 10,
});
const layout = designer.exportToJson();
console.log(layout);
const layout = designer.importFromJson(json);
{
  "label": {
    "width": 100,
    "height": 50,
    "dpi": 203,
    "dotsWidth": 800,
    "dotsHeight": 400,
    "scale": 4,
    "unit": "mm"
  },
  "components": [
    {
      "id": "component-1730799879152",
      "customId": "",
      "type": "TEXT",
      "position": {
        "mm": {
          "x": 12,
          "y": 8.25
        },
        "dots": {
          "x": 96,
          "y": 66
        }
      },
      "content": "data.group",
      "font": {
        "mm": {
          "size": 3
        },
        "dots": {
          "size": 24
        }
      },
      "style": {
        "rotation": 0,
        "fontFamily": "Arial",
        "fontWeight": "normal",
        "fontStyle": "normal",
        "textAlign": "left",
        "textDecoration": "none",
        "color": "#000000"
      }
    },
    {
      "id": "component-1730799923750",
      "customId": "",
      "type": "IMAGE",
      "position": {
        "mm": {
          "x": 7.75,
          "y": 19.75
        },
        "dots": {
          "x": 62,
          "y": 158
        }
      },
      "imagePath": "",
      "size": {
        "mm": {
          "width": 12.5,
          "height": 12.5
        },
        "dots": {
          "width": 100,
          "height": 100
        }
      },
      "style": {
        "rotation": 0
      }
    },
    {
      "id": "component-1730799928984",
      "customId": "",
      "type": "BARCODE",
      "position": {
        "mm": {
          "x": 24.25,
          "y": 25.5
        },
        "dots": {
          "x": 194,
          "y": 204
        }
      },
      "content": "12345678",
      "size": {
        "mm": {
          "width": 38,
          "height": 15.5
        },
        "dots": {
          "width": 304,
          "height": 124
        }
      },
      "barcodeConfig": {
        "type": "CODE128",
        "showText": true,
        "textPosition": "bottom",
        "textAlign": "center",
        "font": {
          "mm": {
            "size": 3
          },
          "dots": {
            "size": 24
          }
        },
        "quietZone": {
          "mm": 1,
          "dots": 8
        },
        "rotation": 0
      },
      "validation": {
        "isValid": true
      }
    },
    {
      "id": "component-1730799938851",
      "customId": "",
      "type": "QRCODE",
      "position": {
        "mm": {
          "x": 54.25,
          "y": 0
        },
        "dots": {
          "x": 434,
          "y": 0
        }
      },
      "content": "https://example.com",
      "size": {
        "mm": {
          "width": 25,
          "height": 25
        },
        "dots": {
          "width": 200,
          "height": 200
        }
      },
      "qrcodeConfig": {
        "errorCorrectionLevel": "M",
        "margin": 4,
        "darkColor": "#000000",
        "lightColor": "#FFFFFF"
      }
    }
  ]
}