Search code examples
phpjqueryjsbarcode

JsBarcode options does not work with jQuery


I'm using jQuery to generate the barcodes and tried to add the size options but it doesn't work. The demo at https://codepen.io/lindell/pen/mPvLXx?editors=1010 isn't working for me because I am using php to loop through the items then only loop it again to generate the barcode.

<!DOCTYPE html>
<html>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="stylesheet" href="https://www.ssms.anrcorporation.com/assets/bower_components/bootstrap/dist/css/bootstrap.min.css">
  <script src="https://www.ssms.anrcorporation.com/assets/bower_components/jquery/dist/jquery.min.js"></script>
  <script src="https://unpkg.com/jsbarcode@latest/dist/JsBarcode.all.min.js">
  </script>
</head>
<body>

<div class="container bg-white">
    <?php if(!empty($items)){ foreach($items as $row){ ?>
        <svg id="<?= $row['sn']; ?>"></svg>
    <?php }} ?>
</div>

<script>
$(document).ready(function(){
    const items = <?= !empty($items) ? json_encode($items) : json_encode([]); ?>;
    if(items){
        items.map(item => {
            $(`#${item.sn}`).JsBarcode(`SSN : ${item.sn}`)
            .options({font: "OCR-B", height: 25, width: 35})
            .render();
        })
    }
})
</script>

<script src="https://www.ssms.anrcorporation.com/assets/bower_components/jquery-ui/jquery-ui.min.js"></script>
<script src="https://www.ssms.anrcorporation.com/assets/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
</body>

Solution

  • Your question were unclear, but if by size you mean fontSize, height, width etc, try something like this:

    $(`#barcode1`).JsBarcode(`SSN : 12341234`, {fontSize: 6, height: 20, width: 1, font: "OCR-B"});