JsBarcode options does not work with jQuery

Question

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>

Can show us the html that the PHP rendered? Maybe doing that you can spot the problem. — Gabriel Lima, Jan 07 '22 at 19:06
Also, what do you mean by size options? Is it the fontSize, height and width? — Gabriel Lima, Jan 07 '22 at 19:20
How are you adding the size? It doesn't seem to be shown in your question — ADyson, Jan 07 '22 at 20:11

score 0 · Accepted Answer · answered Jan 07 '22 at 19:22

0

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"});

answered Jan 07 '22 at 19:22

Gabriel Lima

474
2
9

Thanks, this is actually working. At first I did it this way but for some reason the display was a mess. Do you know what unit is used to determine the size in this library? Putting the width = 1 is fine but I want it to be in 35mm but I just couldn't figure out how to resize it in mm measurement. – Dragon Jan 08 '22 at 00:39

JsBarcode options does not work with jQuery

1 Answers1