如何实现downloadBarcode按钮下载自身紧跟的第一个barcode兄弟元素

问题根因 #

你现有代码的核心问题有两个：

1. document.querySelector 只会返回页面中第一个匹配到的元素，导致你只给第一个下载按钮绑定了点击事件，同时每次读取条形码也只会取全局第一个条码的内容。
2. 没有根据点击的按钮定位对应条码，而是全局查找条码元素。

修复方案 #

推荐使用事件委托实现，性能更高，就算后续动态新增条码行也不需要重新绑定事件，你只需要替换原有事件绑定部分的代码即可，svgToPng 和 svgUrlToPng 两个工具函数可以保留原有逻辑不变。

方案1：事件委托（推荐）

// 如果你的表格有专属id，建议把document替换为表格dom元素，缩小监听范围
document.addEventListener('click', function(e) {
  // 仅匹配点击下载按钮的场景
  if (e.target.classList.contains('downloadBarcode')) {
    // 查找当前按钮所在单元格内的条码元素，结构调整也不容易失效
    const targetBarcode = e.target.closest('td').querySelector('.barcode');
    svgToPng(targetBarcode.outerHTML, (imgData) => {
      const download = document.createElement('a');
      download.href = imgData;
      // 可自定义文件名，比如拼接当前行的产品名实现每个文件命名不同
      download.download = 'barcode.png';
      download.click();
    });
  }
});

方案2：遍历所有按钮绑定事件

如果你不需要兼容后续动态新增的条码行，也可以遍历所有按钮逐个绑定事件：

document.querySelectorAll(".downloadBarcode").forEach(btn => {
  btn.onclick = () => {
    const targetBarcode = btn.closest('td').querySelector('.barcode');
    svgToPng(targetBarcode.outerHTML, (imgData) => {
      const download = document.createElement('a');
      download.href = imgData;
      download.download = 'barcode.png';
      download.click();
    });
  }
});

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