npm react-barcodes 打印条码

Question

我正在尝试从 reactjs 打印条码到 zebra 打印机。

我使用 npm 包 react-barcodes 生成条形码，然后在下面尝试 post 进行打印，但条形码不正确。

How to print a react-barcode component

有人成功了吗？


function Barcode(ref) {
  const { inputRef } = useBarcode({
    value: ref.barId,
    options: {
      format: "ean13",
      flat: true,
      height: 60,
      width: 1.2,
      fontSize: 18
    }
  });

  return <canvas id="barcode-canvas" ref={inputRef}/>;
};

然后终于使用打印功能

const opt = {
        scale: 4
    }
    const elem = document.getElementById("barcode-canvas");
    html2canvas(elem, opt).then(canvas => {
        const iframe = document.createElement('iframe')
        iframe.name = 'printf'
        iframe.id = 'printf'
        iframe.height = 0;
        iframe.width = 0;
        document.body.appendChild(iframe)
    
        const imgUrl = canvas.toDataURL({
            format: 'jpeg',
            quality: '1.0'
        })
    
        const style=`
            height:100vh;
            width:100vw;
            position:absolute;
            left:0:
            top:0;
        `;
    
        const url = `<img style="${style}" src="${imgUrl}"/>`;
        var newWin = window.frames["printf"];
        newWin.document.write(`<body onload="window.print()">${url}</body>`);
        newWin.document.close();
    });

条形码打印出低分辨率，并且只打印了条形码的一小部分。不知道是打印功能还是打印机设置。

Answer 1

条形码打印出低分辨率，并且只打印了条形码的一小部分。不知道是打印功能还是打印机设置问题

这是由于条形码的呈现方式和使用的方法造成的。

我改为使用 svg 然后用它来下载条形码：

onPrintBarcode = () => {
    var container = document.getElementById("div-svg");
    var mySVG = document.getElementById("barcode-canvas");
    var width = "100%";
    var height = "100%";
    var printWindow = window.open('', 'PrintMap',
    'width=' + width + ',height=' + height);
    printWindow.document.writeln(container.innerHTML);
    printWindow.document.close();
    printWindow.print();
    printWindow.close();
  }

这对我有用。

npm react-barcodes 打印条码

npm react-barcodes print barcode

barcode

zebra-printers

npm

reactjs