请求完善HTML/JS代码：生成条码并实现TXT报告下载

需求说明 #

• 从用户处获取三个参数：条码前缀2位字符、起始8位数字、生成数量（最大1000）
• 根据规则生成指定数量的条码编号（最终编号为B12）
• 点击提交按钮后，将所有生成的条码导出为TXT文件供下载

完整修正代码 #

HTML代码 #

<form id="my-form">
  <label for="N1">条码前缀两位字符</label><br><br>
  <input type="text" maxlength="2" onkeyup="this.value=this.value.toUpperCase();" id="N1" onchange="validity.valid||(value='')" required> <br><br>
                                                                                                 
  <label for="N2">条码起始8位数字:</label><br><br>
  <input type="text" pattern="[0-9]{8}" maxlength="8" onchange="validity.valid||(value='')" id="N2" required ><br><br> 
                                                                                                
  <label for="N3">生成条码数量(最大1000):</label><br><br>
  <input type="number" id="N3" min="1" max="1000" onchange="validity.valid||(value='')" required ><br><br>    
                                                                                                 
  <center><button type="submit" name="myButton">生成并下载</button></center>
</form>

JavaScript代码 #

// 绑定表单提交事件，阻止默认刷新行为
document.getElementById('my-form').addEventListener('submit', function(e) {
  e.preventDefault();

  // 获取并格式化用户输入
  const AL = document.getElementById("N1").value.toUpperCase();
  const startNum = parseInt(document.getElementById("N2").value, 10);
  const total = Number(document.getElementById("N3").value);

  const barcodes = [];

  // 循环生成指定数量的条码
  for (let i = 0; i < total; i++) {
    // 确保递增后的数字保持8位格式，补前导零
    const currentBaseNum = startNum + i;
    const paddedNum = currentBaseNum.toString().padStart(8, '0');
    const barcode = "1" + paddedNum;

    // 计算校验位B11
    const myArray = barcode.split("");
    const B1  = myArray[1] * 8;
    const B2  = myArray[2] * 6;
    const B3  = myArray[3] * 4;
    const B4  = myArray[4] * 2;
    const B5  = myArray[5] * 3;
    const B6  = myArray[6] * 5;
    const B7  = myArray[7] * 9;
    const B8  = myArray[8] * 7;
    const B9  = B1 + B2 + B3 + B4 + B5 + B6 + B7 + B8;
    const B10 = B9 % 11;
    let B11 = 11 - B10;
    B11 = B11 === 10 ? '0' : B11;
    B11 = B11 === 11 ? '5' : B11;

    // 生成最终条码并加入数组
    const rem = barcode.substring(1);
    const B12 = AL + rem + B11 + "IN";
    barcodes.push(B12);
  }

  // 生成TXT文件并触发下载
  const textContent = barcodes.join('\n');
  const blob = new Blob([textContent], { type: 'text/plain' });
  const url = URL.createObjectURL(blob);
  const downloadLink = document.createElement('a');
  downloadLink.href = url;
  downloadLink.download = 'barcodes.txt';
  downloadLink.click();
  URL.revokeObjectURL(url);
});

关键改动说明 #

1. 表单事件处理：绑定提交事件并阻止默认刷新，确保生成逻辑在页面内完成
2. 数字格式保持：用padStart(8, '0')保证递增后的数字始终为8位，避免前导零丢失
3. 批量条码收集：通过数组存储所有生成的条码，为批量导出做准备
4. TXT下载实现：利用Blob创建文本文件，生成临时下载链接触发浏览器下载，完成后释放资源

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