How to Print Barcode Labels

Thank you for sharing @Mahendra_Rohit

Hi

I have tried to add this to v12, and followed all instructions step by step including reviewing your screenshots to ensure there are no mistakes, but this is not working when I create a new item.

Assuming I need to enter the item code, item name, item group and then some number in the item_barcode_gener field, the barcode should be generated. Am I right ?

Would love your guidance on this.

@danishaak No need to enter value in barcode_gener this value we set as 1 before form save please check script cur_frm.save()
And this value just for checking barcode already generated or not
Please share your script we will check…

What version is this for ?

ERPNext version12

Am trying it on 11 …not working

Is there anything stopping it from working on 12 ?

Hi Mahendra,

Thanks for replying.

Please find code below:

`frappe.ui.form.on('Item','validate',  function(frm) {
        var cur_doc = frm.doc;
        frappe.model.set_value(cur_doc.doctype, cur_doc.name, "custom_bar_code", cur_doc.item_code);
        if (cur_doc.custom_barcode_gener === 0) {
            if(cur_doc.custom_bar_code){
                $(frm.fields_dict['custom_barcode_image'].wrapper).html('<svg id="code128"></svg>');
                $.getScript("/assets/frappe/js/lib/JsBarcode.all.min.js", function( data, textStatus, jqxhr ) {
                JsBarcode("#code128", cur_doc.custom_bar_code, {
                      height: 40,
                      width: 2,
                      fontSize: 11,
                      flat: true,
                      background: "#FFFFFF"
                });
                var svg = $('#code128').parent().html();
                frappe.model.set_value(cur_doc.doctype, cur_doc.name, "custom_barcode_svg", svg);
                frappe.model.set_value(cur_doc.doctype, cur_doc.name, "custom_barcode_gener", 1);
                cur_frm.save();
            });
            } else 
            {
                frappe.msgprint(__("Please enter Barcode to to be printed"));
            }
        } 

});`

Hi Everybody
I have a query regarding Barcodes
Is there any standard for barcode generation
is the barcode linked to hsn code
suppose i create a barcode for a product manufactured in house
then print and stick that barcode on the packing
the product is moved to a retail shop
the retail shop then scans the barcode
will he get the same information i have about the barcode
Thanks and Regards
Hemanth

Hey there,

I have a related problem. I have a base64 encoded image in a hidden field in my doc. When I use print this picture is being shown. But if i press PDF it dissapears.

Why?

Can someone help in generating a new barcode as soon as the item is saved like getting a button click to generate barcode?

Step by Step Guideline Please.

Step By Step Guideline Please

image

How to Do it pease guide me step by step

1 Like

You should probably refer to the steps written up by @Mahendra_Rohit earlier in this thread.

can you pls share with me the custom_barcoade_ svg field code?

Here is what I have done. Inspired from danishaak.
you will get an out put like this.

  1. Add barcode in the barcodes table for items (I have used ean13 format to make the barcode clean and simple. So please add an ean13 value )
  2. Create a new print format - Settings->Print Format->new
  3. Put the below code in the HTML section of the new print format
<div class="dashboard-section">
  <div class="barcode-label-container">
    <div id="barcode-label" class="barcode-label">
      <div class="barcode-header">LMNAs</div>
      <div class="barcode-text">
        <span class="barcode-strong">{{ doc.item_name }}</span>
      </div>
      <div class="text-center">
          <svg class="barcode"
              jsbarcode-format="ean13"
              jsbarcode-value= {{ doc.barcodes[0].barcode }}
              jsbarcode-height = 30
              jsbarcode-width = "1.5"
              js-barcode-fontSize = 10
              jsbarcode-textmargin="0"

              jsbarcode-fontoptions="bold">
          </svg>
      </div>
      <div class="barcode-foot barcode-strong barcode-rotated">
       {{ doc.get_formatted("standard_rate", doc)  }}
      </div>
    </div>
  </div>
</div>

		
<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.0/dist/JsBarcode.all.min.js"></script>
<script>

JsBarcode(".barcode").init();
</script>
  1. Put this code in the CSS section of the print format

.dashboard-section {
display: flex;
flex-flow: row nowrap;
align-items: flex-end;
}
.dashboard-section > button {
margin-left: 10px;
}
.barcode-label-container {
border: 1px solid #d1d8dd;
width: fit-content;
overflow: hidden;
}
.barcode-label {
background-color: #ffffff;
color: #000000;
box-sizing: border-box;
height: 25mm;
width: 50mm;
padding: 1.5mm;
display: grid;
grid-template-columns: 1fr 6mm;
grid-template-rows: 4mm 1fr 17.5mm;
grid-template-areas: ‘header footer’ ‘text footer’ ‘barcode footer’;
font-family: monospace;
font-size: 8pt;
line-height: 1.2;
text-align: center;
}
.barcode-rotated {
line-height: 6mm;
transform: translate(calc(-10.5mm), 0) rotate(-90deg);
transform-origin: center center;
height: 6mm;
width: calc(31mm);
}
.barcode-header {
grid-area: header;
text-transform: uppercase;
}
.barcode-text {
grid-area: text;
height: calc(16pt);
overflow-y: hidden;
align-self: center;
}
.barcode-area {
grid-area: barcode;
align-self: center;
width: 14mm;
}
.barcode-foot {
grid-area: footer;
font-size: 1.4em;
align-self: center;
}
.barcode-strong {
font-weight: bold;
}

  1. Finally open the item and choose the pint preview. Please do not forget to choose the print format you have recently created. The default would be Standard.
11 Likes

Thank you soo much

1 Like

hello, I’m also using jsbarcode but the barcode in my printformat didn’t show in pdf file. Do you know what could possibly went wrong?

Hello Valen,

Hope you are able to view the barcode in the print preview. Try to use normal print function and choose Save as Pdf in the print dialog.

.

oke thankyou so much, I used the PDF button that’s why it didnt show.