使用react-barcode生成条形码无法调整为指定宽高的问题求助

react-barcode生成的条形码默认开启等比缩放规则，仅固定svg宽度时高度会自动按比例收缩，就是你遇到高度变小的核心原因。以下两种方案可实现固定200px宽、100px高的需求：

方案1：CSS强制适配（改动最小） #

直接通过外层容器控制尺寸，取消svg的等比缩放规则，强制填满容器，适合快速实现的场景：

import styled from 'styled-components';
import BarCode from 'react-barcode';

const FixedBarcodeWrap = styled.div`
  width: 200px;
  height: 100px;
  svg {
    width: 100%;
    height: 100%;
    /* 禁用等比缩放，强制填满容器 */
    preserveAspectRatio: none;
  }
`;

// 组件使用
<FixedBarcodeWrap>
  <BarCode 
    format="CODE128" 
    displayValue={false} 
    width={1.3} 
    height={50} 
    value="dasdasndaslndl2"
  />
</FixedBarcodeWrap>

注意：如果编码内容长度差异过大，条形码的条宽可能被过度压缩或拉伸，可能影响识别率。

方案2：动态计算条宽（识别率最优） #

通过jsbarcode的编码逻辑提前计算给定内容的总模块数，反算出刚好能撑满200px的单条宽度，从生成根源控制尺寸，条宽比例正常，识别率最高：

import BarCode from 'react-barcode';
import JsBarcode from 'jsbarcode';

// 计算单条宽度的工具函数，targetWidth默认200px
const calcBarWidth = (value, targetWidth = 200) => {
  const tempCanvas = document.createElement('canvas');
  // 编码参数和实际使用的保持一致
  const barcodeInstance = JsBarcode(tempCanvas, value, {
    format: 'CODE128',
    displayValue: false,
    margin: 0
  });
  // 获取编码后的总模块数量
  const totalModules = barcodeInstance._encodings[0].data.length;
  return targetWidth / totalModules;
}

// 组件使用
<BarCode 
  format="CODE128" 
  displayValue={false} 
  width={calcBarWidth("dasdasndaslndl2")} 
  height={100} 
  value="dasdasndaslndl2"
  margin={0}
/>

注意：计算时的margin参数要和实际组件使用的margin参数完全一致，避免宽度出现偏差，如果需要边距建议在外层容器加padding实现。

内容的提问来源于stack exchange，提问作者Miracle Hades