PHP站点使用JsBarcode生成发票条码全部重复问题排查求助

问题原因 #

• 你调用JsBarcode时使用了通用类选择器.barcode，每次循环执行JS代码时，都会选中页面上所有已渲染的、带barcode类的SVG元素，统一重写为当前循环的batchnumber值。循环执行完毕后，所有条码都会被覆盖为最后一次循环的批次号，所以显示全部相同。

修复方案 #

给每个条码SVG分配唯一ID，调用JsBarcode时指定对应ID即可，修改后代码如下：

<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js"></script>

<?php foreach($catil as $k => $val){?>

<div class="col-4">
  <!-- 给每个svg加唯一ID，用循环索引拼接 -->
  <svg class="barcode" id="barcode_<?=$k?>"></svg>
  <script>
    // 选中对应ID的SVG生成条码
    JsBarcode("#barcode_<?=$k?>", "<?=$val->batchnumber?>");
  </script>

</div>

<?php }?>

如果不想用ID，也可以直接在循环中获取当前SVG元素传入，同样可以避免全局匹配覆盖的问题。

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