@boom_pk/lowcode-barcode-component/lib/BarcodeComponent.js

阿里低代码引擎条形码组件

import React, { useRef, useEffect } from 'react';
import JsBarcode from 'jsbarcode';
var BarcodeComponent = function BarcodeComponent(props) {
  var canvasRef = useRef(null);
  var _props$value = props.value,
    value = _props$value === void 0 ? 'SAMPLE123' : _props$value,
    _props$format = props.format,
    format = _props$format === void 0 ? 'CODE128' : _props$format,
    _props$width = props.width,
    width = _props$width === void 0 ? 2 : _props$width,
    _props$height = props.height,
    height = _props$height === void 0 ? 100 : _props$height,
    _props$displayValue = props.displayValue,
    displayValue = _props$displayValue === void 0 ? true : _props$displayValue,
    _props$fontSize = props.fontSize,
    fontSize = _props$fontSize === void 0 ? 20 : _props$fontSize,
    _props$textAlign = props.textAlign,
    textAlign = _props$textAlign === void 0 ? 'center' : _props$textAlign,
    _props$textPosition = props.textPosition,
    textPosition = _props$textPosition === void 0 ? 'bottom' : _props$textPosition,
    _props$background = props.background,
    background = _props$background === void 0 ? '#ffffff' : _props$background,
    _props$lineColor = props.lineColor,
    lineColor = _props$lineColor === void 0 ? '#000000' : _props$lineColor,
    _props$margin = props.margin,
    margin = _props$margin === void 0 ? 10 : _props$margin,
    _props$marginTop = props.marginTop,
    marginTop = _props$marginTop === void 0 ? 10 : _props$marginTop,
    _props$marginBottom = props.marginBottom,
    marginBottom = _props$marginBottom === void 0 ? 10 : _props$marginBottom,
    _props$marginLeft = props.marginLeft,
    marginLeft = _props$marginLeft === void 0 ? 10 : _props$marginLeft,
    _props$marginRight = props.marginRight,
    marginRight = _props$marginRight === void 0 ? 10 : _props$marginRight;
  var generateBarcode = function generateBarcode() {
    if (canvasRef.current && value) {
      try {
        JsBarcode(canvasRef.current, value, {
          format: format,
          width: width,
          height: height,
          displayValue: displayValue,
          fontSize: fontSize,
          textAlign: textAlign,
          textPosition: textPosition,
          background: background,
          lineColor: lineColor,
          margin: margin,
          marginTop: marginTop,
          marginBottom: marginBottom,
          marginLeft: marginLeft,
          marginRight: marginRight
        });
      } catch (error) {
        console.error('条形码生成失败:', error);
        // 显示错误信息
        var ctx = canvasRef.current.getContext('2d');
        ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
        ctx.fillStyle = '#ff0000';
        ctx.font = '14px Arial';
        ctx.fillText('条形码生成失败', 10, 30);
      }
    }
  };
  useEffect(function () {
    generateBarcode();
  }, [value, format, width, height, displayValue, fontSize, textAlign, textPosition, background, lineColor, margin]);
  return /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'inline-block',
      padding: '10px'
    }
  }, /*#__PURE__*/React.createElement("canvas", {
    ref: canvasRef,
    style: {
      border: '1px solid #ddd',
      borderRadius: '4px'
    }
  }));
};
export default BarcodeComponent;