npm react-barcodes 打印条形码答案

【问题标题】：npm react-barcodes print barcodenpm react-barcodes 打印条形码
【发布时间】：2021-04-07 13:18:42
【问题描述】：

我正在尝试将条码从 reactjs 打印到斑马打印机。

我使用 npm 包 react-barcodes 生成条形码，然后尝试下面的这篇文章打印，但条形码不正确。

有人搞定了吗？


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();
    });

条码以低分辨率打印在条码的一小部分上。不知道是打印功能还是打印机设置。

【问题讨论】：

标签： reactjs npm barcode zebra-printers

【解决方案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();
  }

这对我有用。

【讨论】：