一次生成多个条形码

Question

我目前正在开发仓库库存系统。剩下的唯一任务就是如何生成和打印货架的箱子 ID。下面的代码只生成 1 个条形码。它只生成最后检查的项目。我需要一次打印多个条形码进行打印。这是我用来生成条形码的参考link。

    <?php
        require ("../../connect/db.php");
        $sql = "select * from location_bin where rack_id = 3";
        $rack   = mysqli_query($mysqli, $sql);

        while($row = mysqli_fetch_array($rack)){
            $id = $row['bin_id'];
            echo "<input type='checkbox' name='barcodeValue' id='barcodeValue' value='$id'/>$id<br>";
            }
    ?>

这是生成条形码的脚本。

<script type="text/javascript">
    function generate(){
    $(document).ready( function() {
    $("input[name=barcodeValue]:checked").each(function () {
    var id = $(this).attr("value");
    function generateBarcode(id){
    var value = id;
    var btype = $("input[name=btype]:checked").val();
    var renderer = $("input[name=renderer]:checked").val();

    var quietZone = false;
    if ($("#quietzone").is(':checked') || $("#quietzone").attr('checked')){
      quietZone = true;
    }

    var settings = {
      output:renderer,
      bgColor: $("#bgColor").val(),
      color: $("#color").val(),
      barWidth: $("#barWidth").val(),
      barHeight: $("#barHeight").val(),
      moduleSize: $("#moduleSize").val(),
      posX: $("#posX").val(),
      posY: $("#posY").val(),
      addQuietZone: $("#quietZoneSize").val()
    };
    if ($("#rectangular").is(':checked') || $("#rectangular").attr('checked')){
      value = {code:value, rect: true};
    }
    if (renderer == 'canvas'){
      clearCanvas();
      $("#barcodeTarget").hide();
      $("#canvasTarget").show().barcode(value, btype, settings);
    } else {
      $("#canvasTarget").hide();
      $("#barcodeTarget").html("").show().barcode(value, btype, settings);
    }
  }


  function showConfig1D(){
    $('.config .barcode1D').show();
    $('.config .barcode2D').hide();
  }

  function showConfig2D(){
    $('.config .barcode1D').hide();
    $('.config .barcode2D').show();
  }

  function clearCanvas(){
    var canvas = $('#canvasTarget').get(0);
    var ctx = canvas.getContext('2d');
    ctx.lineWidth = 1;
    ctx.lineCap = 'butt';
    ctx.fillStyle = '#FFFFFF';
    ctx.strokeStyle  = '#000000';
    ctx.clearRect (0, 0, canvas.width, canvas.height);
    ctx.strokeRect (0, 0, canvas.width, canvas.height);
  }

  $(function(){
    $('input[name=btype]').click(function(){
      if ($(this).attr('id') == 'datamatrix') showConfig2D(); else showConfig1D();
    });
    $('input[name=renderer]').click(function(){
      if ($(this).attr('id') == 'canvas') $('#miscCanvas').show(); else $('#miscCanvas').hide();
    });
    generateBarcode(id);
  });
});
});
}
</script>

下面是 HTML 代码。

<div class="title">Type</div>

      <input type="radio" name="btype" id="code39" value="code39" checked><label for="code39">code 39</label><br />
      <input type="radio" name="btype" id="code93" value="code93"><label for="code93">code 93</label><br />
      <input type="radio" name="btype" id="code128" value="code128"><label for="code128">code 128</label><br />
      <input type="radio" name="btype" id="datamatrix" value="datamatrix"><label for="datamatrix">Data Matrix</label><br /><br />
    </div>
    <div class="config" style="display:none">
      <div class="title">Misc</div>
        Background : <input type="text" id="bgColor" value="#FFFFFF" size="7"><br />
        "1" Bars : <input type="text" id="color" value="#000000" size="7"><br />
      <div class="barcode1D">
        bar width: <input type="text" id="barWidth" value="1" size="3"><br />
        bar height: <input type="text" id="barHeight" value="50" size="3"><br />
      </div>
      <div class="barcode2D">
        Module Size: <input type="text" id="moduleSize" value="5" size="3"><br />
        Quiet Zone Modules: <input type="text" id="quietZoneSize" value="1" size="3"><br />
        Form: <input type="checkbox" name="rectangular" id="rectangular"><label for="rectangular">Rectangular</label><br />
      </div>
      <div id="miscCanvas">
        x : <input type="text" id="posX" value="10" size="3"><br />
        y : <input type="text" id="posY" value="20" size="3"><br />
      </div>
    </div>
    <div class="config">
      <div class="title">Format</div>
      <input type="radio" id="css" name="renderer" value="css" checked="checked"><label for="css">CSS</label><br />
      <input type="radio" id="bmp" name="renderer" value="bmp"><label for="bmp">BMP (not usable in IE)</label><br />
      <input type="radio" id="canvas" name="renderer" value="canvas"><label for="canvas">Canvas (not usable in IE)</label><br />
    </div>
  </div>
  <div id="submit">
    <input type="button" onClick="generate();" value="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Generate the barcode&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;">
  </div>
</div>
<div id="barcodeTarget" class="barcodeTarget"></div>
<canvas id="canvasTarget" width="150" height="100"></canvas>

输出截图

Answer 1

试试这个，也做了一个JSFIDDLE

HTML

<input class="thischeckbox" type='checkbox' name='123' id='123' value='123' />123
<br>
<input class="thischeckbox" type='checkbox' name='456' id='456' value='456' />456
<br>
<input class="thischeckbox" type='checkbox' name='789' id='789' value='789' />789
<br>

<div class="title">Type</div>

<input type="radio" name="btype" id="code39" value="code39" checked>
<label for="code39">code 39</label>
<br />
<input type="radio" name="btype" id="code93" value="code93">
<label for="code93">code 93</label>
<br />
<input type="radio" name="btype" id="code128" value="code128">
<label for="code128">code 128</label>
<br />
<input type="radio" name="btype" id="datamatrix" value="datamatrix">
<label for="datamatrix">Data Matrix</label>
<br />
<br />
<div class="config">
  <div class="title">Format</div>
  <input type="radio" id="css" name="renderer" value="css" checked="checked">
  <label for="css">CSS</label>
  <br />
  <input type="radio" id="bmp" name="renderer" value="bmp">
  <label for="bmp">BMP (not usable in IE)</label>
  <br />
  <input type="radio" id="canvas" name="renderer" value="canvas">
  <label for="canvas">Canvas (not usable in IE)</label>
  <br />
</div>
<div class="config">
  <div class="title">Misc</div>
  Background :
  <input type="text" id="bgColor" value="#FFFFFF" size="7">
  <br /> "1" Bars :
  <input type="text" id="color" value="#000000" size="7">
  <br />
  <div class="barcode1D">
    bar width:
    <input type="text" id="barWidth" value="1" size="3">
    <br /> bar height:
    <input type="text" id="barHeight" value="50" size="3">
    <br />
  </div>
  <div class="barcode2D">
    Module Size:
    <input type="text" id="moduleSize" value="5" size="3">
    <br /> Quiet Zone Modules:
    <input type="text" id="quietZoneSize" value="1" size="3">
    <br /> Form:
    <input type="checkbox" name="rectangular" id="rectangular">
    <label for="rectangular">Rectangular</label>
    <br />
  </div>
  <div id="miscCanvas">
    x :
    <input type="text" id="posX" value="10" size="3">
    <br /> y :
    <input type="text" id="posY" value="20" size="3">
    <br />
  </div>
</div>
<div id="submit">
  <input id="generatecode" type="button" onClick="generate();" value="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Generate the barcode&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;">
</div>

<div id="barcodeTarget" class="barcodeTarget"></div>
<canvas id="canvasTarget" width="150" height="100"></canvas>

js

$('.barcode2D').hide();
$('.barcode1D').show();
$('#miscCanvas').hide();

$('#generatecode').click(function() {
  $('input[type=checkbox]:checked').each(function() {
    var id = $(this).attr("id");
    generateBarcode(id)
  });
});

$(document).on('change', 'input[name=btype]', function() {
  if ($(this).attr('id') == 'datamatrix') {
    showConfig2D();
  } else {
    showConfig1D();
  }
});
$(document).on('change', 'input[name=renderer]', function() {
  if ($(this).attr('id') == 'canvas') {
    $('.config').show();
    $('#miscCanvas').show();
  } else {
    $('.config').show();
    $('#miscCanvas').hide();
  }
});

function generateBarcode(id) {
  var value = id;
  var btype = $("input[name=btype]:checked").val();
  var renderer = $("input[name=renderer]:checked").val();

  var quietZone = false;
  if ($("#quietzone").val() != '') {
    quietZone = true;
  }

  var settings = {
    output: renderer,
    bgColor: $("#bgColor").val(),
    color: $("#color").val(),
    barWidth: $("#barWidth").val(),
    barHeight: $("#barHeight").val(),
    moduleSize: $("#moduleSize").val(),
    posX: $("#posX").val(),
    posY: $("#posY").val(),
    addQuietZone: $("#quietZoneSize").val()
  };
  if ($("#rectangular").is(':checked') || $("#rectangular").attr('checked')) {
    alert("Test")
    value = {
      code: value,
      rect: true
    };
  }
  if (renderer == 'canvas') {
    clearCanvas();
    $("#barcodeTarget").hide();
    $("#canvasTarget").show().barcode(value, btype, settings);
  } else {
    $("#canvasTarget").hide();
    $("#barcodeTarget").html("").show().barcode(value, btype, settings);
  }
}

function showConfig1D() {
  $('.config').show();
  $('.barcode2D').hide();
  $('.barcode1D').show();
}

function showConfig2D() {
  $('.config').show();
  $('.barcode1D').hide();
  $('.barcode2D').show();
}

function clearCanvas() {
  var canvas = $('#canvasTarget').get(0);
  var ctx = canvas.getContext('2d');
  ctx.lineWidth = 1;
  ctx.lineCap = 'butt';
  ctx.fillStyle = '#FFFFFF';
  ctx.strokeStyle = '#000000';
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.strokeRect(0, 0, canvas.width, canvas.height);
}

一次生成多个条形码

Generate multiple barcode at once

php

jquery

mysqli

barcode