React JS中打印条码标签时如何去除自动添加的左右边距？

问题描述 #

我在React JS中打印条码标签时遇到两个棘手问题：

• 打印时左右两侧自动出现额外边距，无法去除
• 设置的标签宽度完全不起作用，布局混乱

试过把条码生成PDF，也没用；加了各种CSS调整，问题还是没解决。

我的React代码 #

import React, { useEffect } from 'react';
import { Button, Col, Container, Navbar, Row } from 'reactstrap';
import JsBarcode from 'jsbarcode';

const PrintBarcodeCreate = () => {
  const products = [
    { no: '546493176226', name: 'Mugdal 500gm', mrp: 1000, salePrice: 990, expDate: "10/10/2023" },
    { no: '546493176226', name: 'Mugdal 500gm', mrp: 1000, salePrice: 990, expDate: "10/10/2023" },
    { no: '546493176226', name: 'Mugdal 500gm', mrp: 1000, salePrice: 990, expDate: "10/10/2023" },
    { no: '546493176226', name: 'Mugdal 500gm', mrp: 1000, salePrice: 990, expDate: "10/10/2023" },
  ];

  useEffect(() => {
    document.title = "POS Create - Ajspire Technologies";

    // Generate barcodes using JsBarcode
    products.forEach(data => {
      JsBarcode(`#barcode-${data.no}`, data.no, {
        format: "CODE128",
        displayValue: true,
        fontSize: 10,
        width: 1.2,
        height: 25,
        margin: 0,
      });
    });
  }, []);

  const handlePrint = () => {
    const printWindow = window.open('', '_blank');
    printWindow.document.write(document.getElementById('printable-area').innerHTML);
    printWindow.document.close();
    printWindow.print();
  };

  return (
    <React.Fragment>
      <div className="page-content" id='hide_scroll' >
        <Button color="primary" onClick={handlePrint}>Print Barcodes</Button>
        <Container>
          <div id="printable-area" style={{ pageBreakAfter: "always", height: "25mm" }}>
            {products.map((data, index) => (
              index % 2 === 0 && (
                <div style={{ display: "flex", }} key={index + 1}>
                  <div style={{ flex: 1, width: "38mm", height: "25mm", marginTop: index === 0 ? "0px" : "10px", border: "2px solid red", textAlign: "center", marginRight: "5mm", pageBreakAfter: "always" }} >
                    <small className='fw-bold'>Sai Mart</small> <br />
                    <svg id={`barcode-${data.no}`} />
                    <p style={{ fontSize: "10px", fontWeight: "bold", marginTop: "2px" }}>{data.name}</p>
                    <p style={{ marginTop: "-5px", display: "flex", justifyContent: "space-around" }}>
                      <span style={{ fontSize: "10px", marginTop: "-1px", fontWeight: "bold", }}>Sale &#8377;. <span style={{ fontSize: "14px", }}>{data.salePrice}</span></span>
                      <span style={{ fontSize: "7px", fontWeight: "bold" }}>Exp :  {data.expDate}</span>
                    </p>
                  </div>
                  {products[index + 1] && (
                    <div style={{ flex: 1, width: "38mm", marginTop: index === 0 ? "0px" : "10px", height: "25mm", border: "2px solid red", textAlign: "center", marginLeft: "5mm" }} >
                      <small className='fw-bold'>Sai Mart</small>
                      <svg id={`barcode-${products[index + 1].no}`} />
                      <p style={{ fontSize: "10px", fontWeight: "bold", marginTop: "2px" }}>{products[index + 1].name}</p>
                      <p style={{ marginTop: "-5px", display: "flex", justifyContent: "space-around" }}>
                        <span style={{ fontSize: "10px", marginTop: "-1px", fontWeight: "bold", }}>Sale &#8377;. <span style={{ fontSize: "14px", }}>{products[index + 1].salePrice}</span></span>
                        <span style={{ fontSize: "7px", fontWeight: "bold" }}>Exp :  {products[index + 1].expDate}</span>
                      </p>
                    </div>
                  )}
                </div>
              )
            ))}
          </div>
        </Container >
      </div >
    </React.Fragment >
  );
};

export default PrintBarcodeCreate;

解决方法 #

1. 修复打印窗口的样式缺失 #

你当前的打印逻辑只复制了HTML，没带原页面样式，浏览器用默认样式导致边距问题。修改handlePrint方法，带上样式并添加打印专用CSS：

const handlePrint = () => {
  const printWindow = window.open('', '_blank');
  // 收集原页面所有样式
  const styles = document.querySelectorAll('link[rel="stylesheet"], style');
  let styleHtml = '';
  styles.forEach(style => {
    styleHtml += style.outerHTML;
  });
  // 增加打印专属样式，强制去除页面边距
  styleHtml += `
    <style>
      @page {
        margin: 0 !important;
        size: auto;
      }
      body {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      #printable-area {
        width: 100%;
        height: auto;
        page-break-after: always;
      }
      .barcode-label {
        width: 38mm !important;
        height: 25mm !important;
        box-sizing: border-box;
      }
    </style>
  `;
  // 完整拼接HTML结构
  printWindow.document.write(`
    <html>
      <head>
        ${styleHtml}
      </head>
      <body>
        ${document.getElementById('printable-area').innerHTML}
      </body>
    </html>
  `);
  printWindow.document.close();
  // 等样式加载完再打印
  setTimeout(() => {
    printWindow.print();
    printWindow.close();
  }, 500);
};

2. 调整条码容器与生成配置 #

• 给SVG添加宽度样式，确保条码适配容器：

  <svg id={`barcode-${data.no}`} style={{width: '100%', height: 'auto'}} />
  

• 优化JsBarcode配置，确保无偏移：

  JsBarcode(`#barcode-${data.no}`, data.no, {
    format: "CODE128",
    displayValue: true,
    fontSize: 10,
    width: 1.2,
    height: 25,
    margin: 0,
    align: 'center', // 条码居中，避免左右偏移
  });
  

3. 修复布局冲突 #

移除flex:1（和固定宽度冲突），用flex布局直接排列标签：

<div style={{ display: "flex", justifyContent: 'space-between', padding: '0 2mm' }} key={index + 1}>
  <div className="barcode-label" style={{ marginTop: index === 0 ? "0px" : "10px", border: "2px solid red", textAlign: "center" }} >
    <small className='fw-bold'>Sai Mart</small> <br />
    <svg id={`barcode-${data.no}`} style={{width: '100%', height: 'auto'}} />
    <p style={{ fontSize: "10px", fontWeight: "bold", marginTop: "2px" }}>{data.name}</p>
    <p style={{ marginTop: "-5px", display: "flex", justifyContent: "space-around" }}>
      <span style={{ fontSize: "10px", marginTop: "-1px", fontWeight: "bold", }}>Sale &#8377;. <span style={{ fontSize: "14px", }}>{data.salePrice}</span></span>
      <span style={{ fontSize: "7px", fontWeight: "bold" }}>Exp :  {data.expDate}</span>
    </p>
  </div>
  {products[index + 1] && (
    <div className="barcode-label" style={{ marginTop: index === 0 ? "0px" : "10px", border: "2px solid red", textAlign: "center" }} >
      <small className='fw-bold'>Sai Mart</small>
      <svg id={`barcode-${products[index + 1].no}`} style={{width: '100%', height: 'auto'}} />
      <p style={{ fontSize: "10px", fontWeight: "bold", marginTop: "2px" }}>{products[index + 1].name}</p>
      <p style={{ marginTop: "-5px", display: "flex", justifyContent: "space-around" }}>
        <span style={{ fontSize: "10px", marginTop: "-1px", fontWeight: "bold", }}>Sale &#8377;. <span style={{ fontSize: "14px", }}>{products[index + 1].salePrice}</span></span>
        <span style={{ fontSize: "7px", fontWeight: "bold" }}>Exp :  {products[index + 1].expDate}</span>
      </p>
    </div>
  )}
</div>

4. 浏览器打印设置配合 #

打印时在浏览器设置里：

• 选择「无边距」或「最小边距」
• 缩放设为「实际大小」或100%，别选「适应页面」

内容的提问来源于stack exchange，提问作者Swapnil Mane